时间戳

首页 > 解决方案 > javascript onclick事件没有鼠标点击响应

javascript - javascript onclick事件没有鼠标点击响应

问题描述

<p>2 + 4 = <span onclick='this.document.getElementsByTagName("p").item(0).innerHTML = eval(2+4)'>답&lt;/span></p>
<p>4 * 20 + 64 = <span onclick='this.document.getElementsByTagName("p").item(1).innerHTML = eval(4*20+64)'>답&lt;/span></p>
<p>20 / 5 - 8 * 2 = <span onclick='this.document.getElementsByTagName("p").item(2).innerHTML = 20/5 - 8*2'>답&lt;/span></p>

我想点击“답”输出数学表达式的答案但是，不起作用

标签： javascript

解决方案

在一个onclick属性中，this表示（事件的）目标元素，所以它不是window，而是 clicked span。

所以你可以做只是this.innerHTML = 2+4，...等。事实上，我更喜欢this.textContent在这里使用，因为您不打算注入 HTML 编码，而是纯文本。

顺便说一句：eval不需要。

<p>2 + 4 = <span onclick='this.textContent = 2+4'>답&lt;/span></p>
<p>4 * 20 + 64 = <span onclick='this.textContent = 4*20+64'>답&lt;/span></p>
<p>20 / 5 - 8 * 2 = <span onclick='this.textContent = 20/5 - 8*2'>답&lt;/span></p>

为了使其更具动态性，您可以使用eval，这样您就不需要重复公式：

document.addEventListener("click", function(e) {
    if (e.target.className == "calc") {
        let formula = e.target.parentNode.textContent.split("=")[0];
        e.target.textContent = eval(formula);
    }
});
<p>2 + 4 = <span class="calc">답&lt;/span></p>
<p>4 * 20 + 64 = <span class="calc">답&lt;/span></p>
<p>20 / 5 - 8 * 2 = <span class="calc">답&lt;/span></p>

请注意，这种情况下的 JavaScript 需要在 script标记中。

推荐阅读