在 Javascript 多个 onclick();收集日期和单一功能

Question

function t1() {
        var show1 = document.getElementById("p1").innerHTML;
        window.alert(show1)
}

function t2() {
        var show2 = document.getElementById("p2").innerHTML;
        window.alert(show2)
}

function t3() {
        var show3 = document.getElementById("p3").innerHTML;
        window.alert(show3)
}

<div>

<p id="p1">I am Headign 1</p>
<p id="p2">I am Headign 2</p>
<p id="p3">I am Headign 3</p>

</div>





<button onclick="t1();">Bt 1</button>
<button onclick="t2();">Bt 2</button>
<button onclick="t3();">Bt 3</button>

在这个程序中，有 3 个函数用于运行类似的程序。如何只使用一个功能并获取我在这个程序中提到的所有信息。

Answer 1

试试这个解决方案

<script type = "test/javascript">
    function t(i) {
        let show = document.getElementById("p" + i).innerHTML;
        window.alert(show);
    }
</script>



<button onclick="t(1);">Bt 1</button>
<button onclick="t(2);">Bt 2</button>
<button onclick="t(3);">Bt 3</button>

Answer 2

你可以使用事件委托来做到这一点，所以你不需要 <p> 元素的 id，请不要写内联 JS 它有很多缺点

/* the onclick event can be delegated so you can have only one 
 * listener for the parent element */
document.querySelector("div").onclick = function(e) {
  // alert the innerHTML only if the element is a `<p>`
  e.target.nodeName === "P" && alert(e.target.innerHTML);
}

<div>
  <p>I am Headign 1</p>
  <p>I am Headign 2</p>
  <p>I am Headign 3</p>
</div>

在 Javascript 多个 onclick();收集日期和单一功能

In Javascript multiple onclick(); Collect Date and Single function

javascript

performance

onclick

dom-events