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

您可以在屏幕截图中看到： enter image description here

如有任何建议，请告诉我。

Answer 1

这是您需要的吗？我发明了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>';
}

onClick属性数据显示

2 个答案: