Question

这是我的代码，我想知道为什么display（）执行而show（）不执行。背后必须有逻辑。请赐教。

<html>
    <head>

    </head>
    <body>
        <button id="b1" onclick="show()">Show</button>
        <p id="p1"></p>
        <p id="p2"></p>
    <body>
    <script>
        function show()
        {
            document.getElementById("p1").innerHTML="Hello";
        }

        document.getElementById("b1").onclick=display;
        function display(){
            document.getElementById("p2").innerHTML="World";    
        }
    </script>
</html>

Answer 1

如果您只有两者之一，则可以使用。问题在于代码的第二位会覆盖 onclick处理程序，这就是为什么从不调用第一个处理程序的原因。

您可以使用addEventListener，它不会覆盖现有的侦听器，但会添加一个额外的侦听器。这样，两者都会触发，尽管我正式认为不能保证您的订单。在这种特殊情况下，没关系。

function show()
{
    document.getElementById("p1").innerHTML="Hello";
}

function display()
{
    document.getElementById("p2").innerHTML="World";    
}

document.getElementById("b1").addEventListener('click', display);

<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>

如评论中所述，最好完全避免使用内联JavaScript，并从标记中删除onclick属性。但是在某些情况下（也许当您停留在WordPress或依赖于这些内联事件处理程序的其他框架上）时，您将无法摆脱这些情况。在这种情况下，您仍然可以按照说明使用addEventListener添加自己的事件处理程序，而不会干扰现有功能。

Answer 2

出于同样的原因：

document.querySelector("P").innerHTML = "Replaced";

<p>Original</p>

…显示为“已替换”。

您用新功能覆盖了onclick功能，完全替代了旧功能。

避免使用onclick属性和属性。请改用addEventListener。

function show() {
  document.getElementById("p1").innerHTML = "Hello";
}

function display() {
  document.getElementById("p2").innerHTML = "World";
}

const b1 = document.getElementById("b1");
b1.addEventListener("click", show);
b1.addEventListener("click", display);

<button id="b1">Show</button>
<p id="p1"></p>
<p id="p2"></p>

Answer 3

EventHandler的

onclick属性用于处理给定元素上的点击事件。

对于onclick事件，您已经通过分配了新的功能对象

 document.getElementById("b1").onclick=display;

一次只能将一个onclick处理程序分配给一个对象

<body>
    <button id="b1" onclick="show()">Show</button>
    <p id="p1"></p>
    <p id="p2"></p>
<body>
<script>
    function show()
    {
        document.getElementById("p1").innerHTML="Hello";
    }

    document.getElementById("b1").onclick=display;
    function display(){
        document.getElementById("p2").innerHTML="World";    
    }
</script>

Answer 4

您只能使用一种显示或显示方法将onclick绑定

为什么<button onclick =“”>不能在JavaScript中的documentgetElemebtById（“”）。onclick = funtion起作用的情况下触发？

4 个答案: