Javascript 使用按钮设置属性并在span标记中显示它

我正在尝试创建一个获取和设置数据属性的真实示例

因此，我创建了一个简单的div，其中包含data-email属性，并设置了一个默认值

现在我想要实现的是，当我点击按钮时，它会将JavaScript代码的默认属性更改为set属性

目前我也不知道如何在div的标签中显示数据属性值

以下是我的标记：

<div id="my-id" data-email="youremail@email.com">Sam's email is <span> "Show Email Here" </span> </div>

<button type="button" id="btn-id" onclick="click-btn()">Set Attribute Now</button>

以下是JSFIDLE链接：

---

有什么想法吗？

正如@adeneo所建议的，我们不应该在函数名中使用连字符，因为它可能被解释为减号，所以请删除，您可以这样使用：

function clickBtn(){
        emailset = email.setAttribute('data-email', 
                   email.getAttribute('data-email') || 'newemail@email.com');
    }

您需要在setAttribute值中使用引号：

function clickBtn(){
    emailset = email.setAttribute('data-email', 'newemail@email.com');
                                               //^^ here           ^^
}

---

你需要这样的东西：

function clickBtn(){
        emailset = email.setAttribute('data-email', 
                   email.getAttribute('data-email') || 'newemail@email.com');
    }

---

第一件事是，你写的电子邮件必须在引号内

<div id="my-id" data-email="youremail@email.com">Sam's email is <span id="my-span-id"> "Show Email Here" </span> </div>

<button type="button" id="btn-id" onclick="click_btn()">Set Attribute Now</button>

代码可在以下位置找到：

我想提一点：

• 在div之前包含JS。因为按钮不会在其声明之前识别click_btn（）函数
• 在JS中，不要对函数名使用“-”符号

---

您可以编写脚本，而无需将ID用于span。它将需要额外的结构（查找子元素，找出所需的子元素，设置其“innertext”。

您需要记住，javascript中的函数名称中不能有连字符，因为它被视为数学运算符。其余只是简单的DOM操作：

<div id='my-id' data-email="youremail@email.com">Sam's email is <span id="mail"> "Show Email Here" </span> 
</div>
<button type="button" id="btn-id" onclick="clickbtn()">Set Attribute Now</button>

小提琴：

---

注意：您也可以使用

元素。firstChild

属性来设置

innerHTML

注意，函数名中不允许使用连字符，因为连字符在javascript中是减号。此处->默认值email如何？在通过按钮更新之前，我如何直接显示它@可能是金伯利，我不明白，所以删除了我的答案…为什么不把它写在标记中，而不是

“在这里显示电子邮件”

那么我如何在span中显示默认值和设置值的数据属性值？是否可以在JSFIDLE中显示我？嘿，你使用jQuery，我需要使用本机javascript抱歉。如果你查看我的标记，你会看到一个标记。我要做的是默认情况下在标记内显示数据电子邮件的默认值，即 "youremail@email.com“现在单击按钮时，它将更改为此”newemail@email.com“明白了吗？好的。可以修改它。请稍等，我会解决它。最后一件事回答得很好。我如何显示默认的数据电子邮件值，即”youremail@email.com“动态？当前仅显示“在此处显示电子邮件”在span标记上。另外，当我单击按钮两次时，它会显示另一封电子邮件。它必须只是新的电子邮件。对，因为您已编写以更改属性，而我没有删除它。如果您删除emailset=email.setAttribute（'data-email'，”newemail@email.com")；它不会这样做。很好的回答只是最后一件事。我如何显示默认的数据电子邮件值，即“youremail@email.com“动态？当前仅显示“在此处显示电子邮件”在span标签上。-金伯利·赖特5分钟前，当我两次单击按钮时，它会显示另一封电子邮件。它必须只是新的电子邮件。-当你两次单击它时，它会显示

newmail@email.com

。

<div id='my-id' data-email="youremail@email.com">Sam's email is <span id="mail"> "Show Email Here" </span> 
</div>
<button type="button" id="btn-id" onclick="clickbtn()">Set Attribute Now</button>

var em;
window.onload = function(){
  em = document.getElementById("my-id");
  document.getElementById("mail").innerHTML = em.getAttribute("data-email");
};
function clickbtn(){    
  var old_mail = em.getAttribute("data-email");
  em.setAttribute("data-email","newmail");
  document.getElementById("mail").innerHTML = em.getAttribute("data-email");
}