Q:

Javascript isn't interacting with a div how I intend it to

DISCLAIMER: I am a complete and total noob at this so please don't scream at me if I miss something obvious.
I am trying to get an external javascript file to update a  element but it keeps giving me the following error:
Uncaught ReferenceError: cannot assign to function call
Here's my code:
<!DOCTYPE html>
 <html lang="en">
  <body>
   <script src="magic.js"></script>
    <button onclick="detclic()"></button>
     <div id="htmldivone"></div>
  </body>
</html>

The javascript code:
var i = 2;
var e = 1;
var o = e * 2;
function detclic() {
if (o <= i) {
i = i - o;
document.getElementById("htmldivone").innerHTML = o;
}
}

Basically I would give the variable i a value of 2 and it would take 3 tries to get the  element to update, I can't figure out why. Help?
(This is just some silly minigame I'm making before you ask.)

A:

In this line:
<button onclick="detclic()"></button>

you reference the detclic() function which then references #htmldivone
even though, at this point, the parser has not yet reached:
<div id="htmldivone"></div>

nor parsed the detclic() function.

Alternative approach:
An alternative - and arguably cleaner - approach to using an inline event listener like onclick="detclic()" is:

remove onclick="detclic()" from your HTML; and
use addEventListener in your script instead

like this:
const myButton = document.getElementsByTagName('button')[0];
myButton.addEventListener('click', detclic, false);

