JavaScript onclick函数失效求助：点击按钮无响应

问题根源 #

你把点击事件onclick="purchase()"错误绑定到了id为error的<p>标签上，而不是「Purchase - $149」按钮上，所以点击按钮时完全不会触发purchase()函数，自然没有任何反应。

修复方式 #

方式1：直接给按钮添加内联点击事件 #

修改按钮的HTML代码，把点击事件绑定到按钮本身，同时移除<p>标签上多余的onclick属性：

<button onclick="purchase()">Purchase - $149</button>
<p id="error"></p>

方式2：使用JavaScript事件监听（更推荐） #

这种方式不需要在HTML里写内联事件，更符合代码分离的规范：

1. 获取按钮元素
2. 给按钮添加点击事件监听

修改后的完整代码：

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <img src="images/shoe.jpeg" alt="Nike shoe">
        <p>Nike shoe</p>
        <button>Purchase - $149</button>
        <p id="error"></p>
        <script>
           let errorID = document.getElementById("error")
           const purchaseBtn = document.querySelector("button")

           function purchase() {
               console.log("Button is clicked")
               errorID.textContent = "Something went wrong, please try again"
           }

           // 给按钮绑定点击事件
           purchaseBtn.addEventListener("click", purchase)
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Abdullah