Question

var Home = document.getElementById("home");
var Page = document.getElementById("page");

Home.onclick = function(){Page.innerHTML = "I TYPED A BUNCH OF HTML HERE";};

为什么这不起作用？ div id =＆＃34; page＆＃34;没有任何反应。当我点击div id =＆＃34; home＆＃34;元件。

注意：这是.js文档中脚本标记之间链接的纯Javascript

编辑：我尝试使用事件监听器方法。

Home.addEventListener("click", function(){Page.innerHTML = "

ALL THE HTML HERE

";
});

仍然没有任何事情发生在div id＆＃34; page＆＃34;当div id＆＃34; home＆＃34;点击。尝试在IE和Chrome中运行。

Answer 1

请参阅下面的示例，它运行得很好。

但请记住，在附加事件侦听器之前应该加载该元素。

我建议你将下面的代码放在页面底部，就像关闭body标签一样。

或者调用文档onload上的代码，如下所示：

document.addEventListener("load", function(){
    //ATTACH THE CLICK LISTENER HERE    
});

var Home = document.getElementById("home");
Home.onclick = function(){
  alert("click happened");
};

<div id="home">This is the div with id home</div>

Answer 2

这是在.js文档中的脚本标记之间链接的简单Javascript

如果是.js文档，则不需要<script></script>标记。

请尝试以下代码段：

＆＃13;

 var Home = document.getElementById("home");
 var Page = document.getElementById("page");
    
 Home.onclick = function(){
 Page.innerHTML = "I TYPED A BUNCH OF HTML HERE";
};

＆＃13;

  <div id="home">  Home </div>
  <div id="page">   </div>

＆＃13;

您应该将文本连接到元素的innerHTML而不是分配。

另一个恼人的JavaScript点击事件问题

2 个答案: