Question

因此我的代码中存在问题的部分如下

var manuSu = document.getElementById("Man");

manuSu.onclick = function(){
   for(i=0; i<8;i++){
     periodEnd[i] = document.getElementById("pE").elements.item(i).value;
   }
   modal.style.display = "none";
}

“Man”是一个按钮，“pE”是一个表单。我已经在chrome中运行代码并获得错误

未捕获的TypeError：无法设置null（...）

的属性'onclick'

我已经完成了大约30分钟的谷歌搜索，显然它与模态有关。表单和按钮都包含在模态

中

修改除非您之前在包含作用域中的i循环中声明了for变量，否则请认识到您将声明一个全局变量（一种不好的做法）。

Answer 1

问题是你的<div id="Man"></div>在那一刻不存在，然后执行此代码。只需在显示模态后运行它，然后<div id="Man"></div>在DOM中。

你也可以使用jQuery-framework，在那里你可以在对象上附加事件监听器，这些监听器在那一刻不存在，但可以在以后出现。

Answer 2

仅根据您提供的内容来诊断错误很困难。但是，根据Chrome的抛出错误，我可以想到的一个可能的问题与<script>加载有关。例如，如果您没有将代码包装在window.onload事件侦听器（或其jQuery等效项$(document).ready()）中，则很容易遇到诸如您遇到的问题。问题源于在函数执行之前尚未完全解析/呈现DOM的事实。因此，当它查找具有id属性#Man的内容时，它会返回null，因为尚未将任何此类元素附加到DOM。 onload（或ready）事件处理程序通过推迟脚本执行直到完全呈现DOM来消除此问题。为此，移动包含您的函数的<script>标记，使其成为<body>元素的结束标记（</body>）之前的最后一个元素，也可能会有所帮助。因为HTML页面是线性读取的（即，从左到右，从上到下），所以在HTML页面中将<script>委托给此位置意味着它不会被点击直到整个document.body被渲染并显示出来。

模态和形式

2 个答案: