JavaScript单击addEventListener不能处理我的代码
[英]JavaScript click addEventListener not working on my code
问题描述
I am trying to get a JavaScript listener to work but nothing changes. 
我试图让JavaScript监听器工作，但没有任何改变。
Here is the full code: 这是完整的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener("click", () => {
document.getElementById("trigger"), () => {
document.getElementById("box").innerHTML = "New Box Text";
}
});
</script>
</body>
</html>
I know I can do this using jQuery, but I want to do it with just pure, vanilla JavaScript. 我知道我可以使用jQuery做到这一点，但我想用纯粹的，普通的JavaScript做到这一点。
When I click on #trigger , #box text is not changing. 当我点击#trigger ， #box文本没有改变。 What I'm I doing wrong? 我做错了什么？
2 个解决方案
解决方案1
2 已采纳 2018-08-02 21:58:03
In order to run your code only, when the DOM completely loaded and parsed, add an evenet listener under the DOMContentLoaded event, then use querySelector to select the element with the #trigger id, then add a click event listener to it and use querySelector again to select the element with #box id and modify its .innerHTML accordingly: 为了仅运行代码，当DOM完全加载和解析时，在DOMContentLoaded事件下添加一个evenet侦听器，然后使用querySelector选择具有#trigger id的元素，然后向其添加一个click事件侦听器并再次使用querySelector选择具有#box id的元素并相应地修改其.innerHTML ：
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
The great thing about using querySelector and also querySelectorAll is that they provide a similar functionality compared to jQuery, when selecting elements. 使用querySelector和querySelectorAll的好处是，在选择元素时，它们提供了与jQuery相比的类似功能。
Example: 例：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #trigger { padding: 20px; background-color: red; border: 1px solid white; width: 100px; cursor: pointer; } #box { padding: 20px; background-color: green; border: 1px solid white; width: 100px; cursor: pointer; } </style> </head> <body> <div id="trigger">Click Here</div> <div id="box"> content should change </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', () => { document.querySelector("#trigger").addEventListener('click', () => { document.querySelector("#box").innerHTML = "New Box Text"; }); }); </script> </body> </html>
解决方案2
1 2018-08-02 21:53:00
Add the listener to the box element rather than the entire page: 将侦听器添加到box元素而不是整个页面：
document.getElementById("trigger").addEventListener("click", () => document.getElementById("box").innerHTML = "New Box Text" );
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #trigger { padding: 20px; background-color: red; border:1px solid white; width: 100px; cursor: pointer; } #box { padding: 20px; background-color: green; border:1px solid white; width: 100px; cursor: pointer; } </style> </head> <body> <div id="trigger">Click Here</div> <div id="box"> content should change </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.