Javascript position of onchange assignment

Question

I have a checkbox and a text input. I want that the text input is only enabled if the checkbox is checked. I found an answer to this problem here, but the following code did not work:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <script type="text/javascript">
      document.getElementById('yourBox').onchange = function() {
        document.getElementById('yourText').disabled = !this.checked;
      };
    </script>
  </head>
    <body>
         <input type="text" id="yourText" disabled /> 
         <input type="checkbox" id="yourBox" />
    </body>
</html>

However, I noticed that the code works if I move the < script > environment below the < input > boxes like that

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>title</title>
      </head>
        <body>
             <input type="text" id="yourText" disabled /> 
             <input type="checkbox" id="yourBox" />
         <script type="text/javascript">
          document.getElementById('yourBox').onchange = function() {
            document.getElementById('yourText').disabled = !this.checked;
          };
        </script>
        </body>
    </html>

Why does the position of the < script > environment play a role for the onchange attribute?

Browsers read like us, from the top left, to the right and down. Your javascript is causing an error because the browser hasn't read your element to know it exists. `window.onload` will fix your issue as the source code will only be called/used after the page has loaded. — NewToJS, Mar 28 '15 at 17:48

score 2 · Answer 1 · answered Mar 28 '15 at 17:49

That's because the page is parsed from the top, and each element is added as soon as it is parsed.

When the script tag has been parsed the code will run right away. At that time the input tags hasn't been parsed, so the input elements doesn't exist yet.

By placing the script tag below the input tags, the script runs after the input elements has been created.

Instead of rearranging the code, you can use the onload event to make sure that the code runs after the page is completely parsed:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <script type="text/javascript">
      window.onload = function() {
        document.getElementById('yourBox').onchange = function() {
          document.getElementById('yourText').disabled = !this.checked;
        };
      };
    </script>
  </head>
    <body>
         <input type="text" id="yourText" disabled /> 
         <input type="checkbox" id="yourBox" />
    </body>
</html>

Javascript position of onchange assignment

1 Answers1