Отображение данных атрибута onClick - PullRequest
Новая
       12

Отображение данных атрибута onClick

0 голосов
/ 16 сентября 2018

Я хотел бы показать данные периодической таблицы для одного элемента div с помощью события onClick и получить данные из самого атрибута li.

Код JavaScrip: 

<script>
    function myElement() {

        var number = document.getElementById("myBtn").getAttribute("data-number");
        var symbol = document.getElementById("myBtn").getAttribute("data-symbol");
        var name = document.getElementById("myBtn").getAttribute("data-name");
        var mass = document.getElementById("myBtn").getAttribute("data-mass");

        document.getElementById("element-info").innerHTML = '<span class="atomic-number">' + number + '</span>' + '<h1>' + symbol + '</h1>' + '<p>' + name + '</p>' + '<p>' + mass + '</p>';
    }

</script>

Вы можете увидеть HTML-код ниже: 

enter code here

вы можете увидеть на скриншоте: введите описание изображения здесь

Если есть предложения, пожалуйста, дайте мне знать.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Я нашел решение.

Вы можете проверить это: 

<ul>
<li id="option1" 
   data-id="101" 
   data-option="21"
   onclick="goDoSomething(this);">
       Option-1
</li>
<li id="option1" 
   data-id="102" 
   data-option="22" 
   onclick="goDoSomething(this);">
       Option-2
</li>

JS код: 

function goDoSomething(d){
var dataOption = (d.getAttribute("data-option"));
var dataId = (d.getAttribute("data-id"));

document.getElementById("outPut").innerHTML = 
'<p>' + 'Data Option:' + dataOption + '</p>' + 
'<p>' + 'Data Id:' + dataId + '</p>';
}
0 голосов
/ 16 сентября 2018

Это то, что вам нужно?Я изобрел HTML, так как отсутствует в вашем вопросе. 

function myElement() {
        var number = myBtn.dataset.number;
        var symbol = myBtn.dataset.symbol;
        var name = myBtn.dataset.name;
        var mass = myBtn.dataset.mass;

        document.getElementById("element_info").innerHTML = '<span class="atomic-number">' + number + '</span>' + '<h1>' + symbol + '</h1>' + '<p>' + name + '</p>' + '<p>' + mass + '</p>';
    }


myBtn.addEventListener("click", myElement)
<button id="myBtn" data-number="1" data-symbol="symbol" data-name="name" data-mass="mass">my button</button>

<p id="element_info"></p>
...