onClick屬性數據顯示

Question

我想通過使用onClick事件在單個div上顯示元素周期表數據，並從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

您可以在屏幕截圖中看到： 在此處輸入圖片描述

如果有任何建議，請告訴我。

Answer 1

這是您需要的嗎？ 我發明了HTML，因為您的問題中遺漏了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> 

Answer 2

我找到了解決方案。

您可以檢查以下內容：

<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>';
}