javascript onclick 事件鼠標點擊無響應
[英]javascript onclick event no response from mouse click
問題描述
<p>2 + 4 = <span onclick='this.document.getElementsByTagName("p").item(0).innerHTML = eval(2+4)'>답</span></p> <p>4 * 20 + 64 = <span onclick='this.document.getElementsByTagName("p").item(1).innerHTML = eval(4*20+64)'>답</span></p> <p>20 / 5 - 8 * 2 = <span onclick='this.document.getElementsByTagName("p").item(2).innerHTML = 20/5 - 8*2'>답</span></p>
我想點擊“답”到 output 數學表達式的答案但是，不起作用
3 個解決方案
解決方案1
0 2020-06-16 10:21:47
document是全局的，而不是span元素的屬性。 不要用this 。
解決方案2
0 2020-06-16 10:22:06
您只需從this.documentdocument.getElementsByTagName中刪除關鍵字 this。
為什么？
document是一個全局變量，表示瀏覽器中加載的任何 web 頁面，並用作 web 頁面內容的入口點，即DOM 樹。 跨度是存儲在 DOM 樹中的Html 元素。
通過使用this關鍵字，您嘗試訪問 span 的屬性，而不是訪問document變量。
遵循一個完整的工作示例。
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM 객체 변경 - 내용 변경</title> </head> <body> <h1>계산해봅시다.</h1> <hr> <p>2 + 4 = <span onclick='document.getElementsByTagName("p").item(0).innerHTML = eval(2+4)'>답</span></p> <p>4 * 20 + 64 = <span onclick='document.getElementsByTagName("p").item(1).innerHTML = eval(4*20+64)'>답</span></p> <p>20 / 5 - 8 * 2 = <span onclick='document.getElementsByTagName("p").item(2).innerHTML = 20/5 - 8*2'>답</span></p> </body> </html>
您可以使用 span 屬性，而不是從 dom 樹中獲取相應的 dom 元素，並且只使用innerHtml或textContent的值來更改跨度，如下所示：
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM 객체 변경 - 내용 변경</title> </head> <body> <h1>계산해봅시다.</h1> <hr> <p>2 + 4 = <span onclick='this.innerHTML = eval(2+4)'>답</span></p> <p>4 * 20 + 64 = <span onclick='this.innerHTML = eval(4*20+64)'>답</span></p> <p>20 / 5 - 8 * 2 = <span onclick='this.innerHTML = 20/5 - 8*2'>답</span></p> </body> </html>
在這里查看innerHtml和textContent之間的區別
解決方案3
0 2020-06-16 10:23:25
在onclick屬性中， this表示（事件的）目標元素，因此它不是window ，而是單擊的span 。
所以你可以這樣做this.innerHTML = 2+4 ，...等。 事實上，我更喜歡在這里使用this.textContent ，因為您不打算注入 HTML 編碼，而是純文本。
順便說一句：不需要eval 。
<p>2 + 4 = <span onclick='this.textContent = 2+4'>답</span></p> <p>4 * 20 + 64 = <span onclick='this.textContent = 4*20+64'>답</span></p> <p>20 / 5 - 8 * 2 = <span onclick='this.textContent = 20/5 - 8*2'>답</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">답</span></p> <p>4 * 20 + 64 = <span class="calc">답</span></p> <p>20 / 5 - 8 * 2 = <span class="calc">답</span></p>
請注意，在這種情況下，JavaScript 需要在script標記中。
如何從身體上的 onClick 事件中獲得鼠標點擊的絕對 position？
[英]How do I get the absolute position of a mouse click from an onClick event on the body?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.