首页 > 解决方案 > 为什么 chrome 在我的 JS 上抛出错误,但在 IE FF Android 和 Safari 中运行良好?

问题描述

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

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

这是有问题的 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的新手,所以如果我问错了这个问题,请告诉我如何做得更好。

谢谢

标签: javascripthtml

解决方案


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


推荐阅读