Используйте кнопку setAttribute и покажите ее в теге span

Question

Я пытаюсь создать реальный пример атрибута get и set data.

поэтому я создал простой div, который содержит атрибут data-email и устанавливает значение по умолчанию.

Теперь, что я хочу достичь, когда я нажимаю на кнопку, он изменит атрибут по умолчанию на атрибут set на моих кодах JavaScript.

В настоящее время я также не знаю, как я могу показать значение атрибута данных внутри тега моего 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> 

вот мой JavaScript:

var email = document.getElementById('my-id'); 

var emailget = email.getAttribute('data-email'); 
var button = document.getElementById('btn-id'); 

function click-btn(){ 
    emailset = email.setAttribute('data-email', newemail@email.com); 
} 

вот ссылка JSFIDDLE: http://jsfiddle.net/jypb2jdg/6/

Любая идея?

Answer 1

Как @adeneo предложил не использовать дефис в имени функции, как это может быть истолковано как знак минус, так что удалить, и вы можете использовать так:

Вы должны использовать кавычки в значении 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'); 
    } 

Answer 2

Первое, что электронная почта вы должны быть в кавычках.

<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> 

Код JS:

function click_btn(){ 
    var email = document.getElementById('my-id'); 
    var emailContainer = document.getElementById("my-span-id"); 
    var emailget = email.getAttribute('data-email'); 
    emailContainer.innerText = emailget; 
    emailset = email.setAttribute('data-email', "newemail@email.com"); 
} 

Код можно найти в: http://jsfiddle.net/jypb2jdg/17/

какой-то момент я хочу отметить:

• Включите JS перед DIV , Поскольку кнопка не распознает функцию click_btn() перед ее объявлением;
• Не используйте символ «-» для имен функций в JS.

Вы можете написать сценарий без использования идентификатора для диапазона. Это потребует дополнительных структур (поиск дочерних элементов, определение того, что вам нужно, установить его «внутренний текст».

Answer 3

Необходимо помнить, что функции в 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> 

ЯШ:

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"); 
} 

Fiddle: http://jsfiddle.net/dndnqygL/4/

Примечание: вместо назначения нового идентификатора размаху вы можете также использовать element.firstChild свойство для установки innerHTML.