我目前有一个脚本，可以按预期作为标记底部的块脚本工作。当我尝试运行与外部 js 文件相同的脚本时，它不再起作用。
我可能错过了一些基本的东西。这两个脚本之间的唯一区别是一个是块编码的，另一个是外部的。以下是原页。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>
<body>
<select id="opSelect" >
<option value="Addition">Addition</option>
<option value="Subtraction">Subtraction</option>
<option value="Multiplication">Multiplication</option>
<option value="Division">Division</option>
</select>
<div id="mathCalc">
<p><h1>this is page 2</h1></p>
<div class="opChoice" id="opOne">Addition</div>
<div><button class="gobtn" id="gobtn" type="button">GO</button></div>
</div>
<div id="mathScore">
<p><h1>this is page 3</h1></p>
<div id="opTwo" class="opChoice">Addition</div>
<div><button class="gobtn" id="gobtn" type="button">GO</button></div>
</div>
<script>
document.getElementById("opSelect").onchange = function() {
let choice=document.getElementById("opSelect").value;
if (choice == "Addition") {
document.getElementById("opOne").innerHTML = "Addition";
document.getElementById("opTwo").innerHTML = "Addition";
}
else if (choice == "Subtraction") {
document.getElementById("opOne").innerHTML = "Subtraction";
document.getElementById("opTwo").innerHTML = "Subtraction";
}
else if (choice == "Multiplication") {
document.getElementById("opOne").innerHTML = "Multiplication";
document.getElementById("opTwo").innerHTML = "Multiplication";
}
else if (choice == "Division") {
document.getElementById("opOne").innerHTML = "Division";
document.getElementById("opTwo").innerHTML = "Division";
}
};
</script>
</body>
</html>
文件结构
这工作完全正常。
这是index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>
<body>
<select id="opSelect" >
<option value="Addition">Addition</option>
<option value="Subtraction">Subtraction</option>
<option value="Multiplication">Multiplication</option>
<option value="Division">Division</option>
</select>
<div id="mathCalc">
<p><h1>this is page 2</h1></p>
<div class="opChoice" id="opOne">Addition</div>
<div><button class="gobtn" id="gobtn" type="button">GO</button></div>
</div>
<div id="mathScore">
<p><h1>this is page 3</h1></p>
<div id="opTwo" class="opChoice">Addition</div>
<div><button class="gobtn" id="gobtn" type="button">GO</button></div>
</div>
</body>
<script src="./index.js"></script>
</html>
这是index.js
document.getElementById("opSelect").onchange = function() {
let choice=document.getElementById("opSelect").value;
if (choice == "Addition") {
document.getElementById("opOne").innerHTML = "Addition";
document.getElementById("opTwo").innerHTML = "Addition";
}
else if (choice == "Subtraction") {
document.getElementById("opOne").innerHTML = "Subtraction";
document.getElementById("opTwo").innerHTML = "Subtraction";
}
else if (choice == "Multiplication") {
document.getElementById("opOne").innerHTML = "Multiplication";
document.getElementById("opTwo").innerHTML = "Multiplication";
}
else if (choice == "Division") {
document.getElementById("opOne").innerHTML = "Division";
document.getElementById("opTwo").innerHTML = "Division";
}
};