为什么 chrome 在我的 JS 上抛出错误，但在 IE FF Android 和 Safari 中运行良好？答案

【问题标题】：Why is chrome throwing error on my JS but works fine in IE FF Android and Safari?为什么 chrome 在我的 JS 上抛出错误，但在 IE FF Android 和 Safari 中运行良好？
【发布时间】：2018-09-09 14:00:11
【问题描述】：

我创建了一个带有条件 div 的排序形式。当用户单击是/否单选按钮时，将显示一个新的 div。在除 chrome 之外的所有浏览器中，它都可以正常工作。但是在 Chrome 中，当用户选择是/否单选按钮时，不会显示新的 div 并且控制台会抛出以下错误

未捕获的类型错误：无法读取 null 的属性“样式” 在 displayQuestion (conditional.js:3) 在 HTMLInputElement.onchange

这是有问题的 HTML：

<label>
<input type="radio" id="yestub" name="walltile1" value="yes" 
onchange="displayQuestion(this.value, 2)" />Yes
</label>
<label>
<input type="radio" id="notub" name="walltile1" value="no" 
onchange="displayQuestion(this.value, 2)" />No
</label>
<div id="yesQuestion2" style="display:none;"><br/>
 <!-- some form fields -->
</div>
 <div id="noQuestion2" style="display:none;"><br/>
Ok Thank you!
</div>

这里是相关的JS：

function displayQuestion(answer, n) {

document.getElementById(answer + 'Question' + n).style.display = "block";

if (answer == "yes") {

document.getElementById('noQuestion' + n).style.display = "none";

} 
else if (answer == "no") {

document.getElementById('yesQuestion' + n).style.display = "none";

}

}

为什么这会将 null 返回到 chrome 但在其他浏览器中可以正常工作？

还做了一个小提琴，无法让它在那里工作.. https://jsfiddle.net/fiveonadub/mq7erj9f/3/

谁能帮我理解这里发生了什么。

我也是 stackoverflow 的新手，所以如果我问错了这个问题，请告诉我如何才能做得更好。

谢谢

【问题讨论】：

标签： javascript html

【解决方案1】：

这只是 CodePen 中加载顺序的问题。在 Javascript 窗口/面板中，单击下拉菜单并选择函数“No wrap - bottom of <body>”并重新运行您的代码。

【讨论】：

尊敬的，您的解决方案有效，但它实际上是关闭问题，而不是订单问题。
不客气。请在此处接受最能帮助您的答案。我推荐@David784 的答案，因为它解释了为什么我的答案有效，并且从长远来看可能对您的理解更有价值。 :)
所以，我相信你解释得当，我几乎明白了。但我不明白如何修改代码以使其工作。我不想让你为我编写代码，因为我想了解它在未来的工作中是如何工作的。我不明白如何在闭包中添加窗口属性。也许你知道一些关于这个主题的好教程
您没有在闭包中添加窗口属性。您正在使您的函数成为窗口的属性，以避免闭包。只需按照@David784 的回答中的说明操作即可。
我将 window.displayQuestion = 添加到我的脚本中，但我仍然遇到同样的错误

【解决方案2】：

这是一个关闭问题。正如@jmargolisvt 在他的回答中指出的那样，查看 jsfiddle 中的 JavaScript 下拉列表很重要，在您的示例中显示“加载类型：加载时”。

这意味着您的所有代码都在与事件处理程序关联的函数内部。这意味着您的函数定义在所谓的 closure 内部，因此不是全局函数。

有两种方法可以解决这个问题：首先，正如@jmargolisvt 所说，将它放在No wrap 脚本标记中（顶部或底部都可以）就足以使它成为global 函数。

另一种可能性是首先知道是什么使变量或函数成为“全局”的：Web 浏览器中的所有全局变量都是 window 对象的属性。您可以在任何闭包内添加窗口属性，例如：

window.displayQuestion = function(answer, n) { /* ... */ }

这是最明确的解决方案，因为无论闭包如何，它都会始终有效。

【讨论】：