Why does my script not work as an external file? – Blancer.com Tutorials and projects

I currently have a script that works as expected as a block script at the bottom of the markup. When I try to run the same script as an external js file, it no longer works.

I am probably missing something basic. The only difference between the two scripts was that one was block coded and the other was external. Below is the original page.

<!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>