使用 JS 显示时出现样式错误，但在 JSFIDDLE 中运行流畅

Question

我有下面的代码。我想要的结果正是 jsfiddle 中的样子：完美运行！在我的浏览器中，我收到以下两个区分它的错误：

法典：

http://jsfiddle.net/pbvwjL94/1/

GET http://localhost/favicon.ico 404 (Not Found)
realjs.js:236 Uncaught TypeError: Cannot read property 'style' of null
at showForm (realjs.js:236)
at HTMLSelectElement.onchange (testwriting.php:57)

在我的浏览器中，当我选择科学时，写作部分工作得很好，阅读部分工作。但是，错误仍然出现。其他部分只是不起作用。

我知道这是很多代码，但我在网上搜索了这么长时间的答案，没有人能够帮助我。

我真的需要它伙计们

谢谢

如前所述，这是我的 id 为 f9 的元素

<div class="form-group" name="skill5" id="f9" style="display:none">
<select class="form-control" name="skill5" id="readingsocialstudies" onchange="showForm()" data-required>
<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Select Your Skill-</option>
<option value="Big Picture">Big Picture</option>
<option value="Attention to Detail">Attention to Detail</option>
<option value="Inference">Making Inferences</option>
<option value="Function">Identifying Function</option>
<option value="Vocabulary In Context">Vocabulary In Context</option>
<option value="Analogy">Drawing Analogies</option>
<option value="Author Technique">Author Technique</option>
<option value="Evidence Support">Supporting with Evidence</option>
<option value="Data Reasoning">Data Reasoning</option>
</select>   
<br style="line-height:10px;">
<select class="form-control" name="passageid1" data-required>
<option value="">&nbsp;&nbsp;&nbsp;-Select Your Passage ID-</option>
<?php 
$sql = mysqli_query($connect, "SELECT ID FROM excerptlist");
while ($row = $sql->fetch_assoc()){
$ID = $row['ID'];
echo "<option value='".$ID."'>" . $ID . "</option>";
}
?>
</select>  
</div>

Answer 1

错误消息指向第 236 行

document.getElementById("f9").style.display = "none";

查看您的 html，没有带有 idf9的元素。这意味着document.getElementById("f9")将返回null，并且不可能在此基础上获得属性.style。

如果您添加正确的元素，我认为您的代码将正常工作 👍