getElementById and button are null

Question

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      //function parameters do not have types?
      function calculateAge(birthYear, currentYear)
      {
        var page = document.getElementById("content");
        var content = page.innerHTML;
        var age = currentYear-birthYear;
        var stage;
        if (age <18)
        {
          stage = "Teenager";
        }
        else if (age >= 18 || age <= 35)
        {
          stage = "Adult";
        }
        else
        {
          stage = "Mature Adult";
        }
        var outputMessage = "Your stage is: " + stage + ".\n" + "Your age is: " + age + ".";
        page.insertBefore(outputMessage, page.firstChild);
      }
      //  var input = document.getElementById('submit');
      //  input.addEventListener('click', calculateAge);
      //  var form = document.getElementById('input');
      //  form.onsubmit = function()
      //  {
      //    calculateAge ()
      //  }
      var button = document.getElementById("submit");
      button.onclick = function()
      {
        value1 = button.form.box1.value;
        value2 = button.form.box2.value;
        calculateAge(value1, value2);
      }
    </script>
  </head>
  <body>
      <div class="basic">
        <form id="input">
            <p class="content">
              <label> Birth Year: <input type="text" id="box1"></label> <br></br>
              <label> Current Year: <input type="text" id="box2"></label> <br></br>
              <input type="button" value="Calculate" id="submit" onclick="calculateAge(document.getElementById('box1').value, document.getElementById('box2'.value))"/>
            </p>
           </form>
      </div>
  </body>
</html>

I am new to html and js and i am just trying to make a simple page with 2 input boxes that send user input data to a method via button click which then processes the data and outputs a message above the form. I cant understand why I am getting like 3-4 null errors, everything looks like its defined, no spelling mistakes, no duplicate IDs, every tag has an opening and closing tag, ive spent HOURS looking for whats wrong, cant see what im missing.

You don't have any element with an `id` of "content", of course getElementBy**Id** is returning null. (Change `class="content"` to `id="content"`) — Tibrogargan, Oct 10 '16 at 00:30
@Tibrogargan The problem happens earlier. `var button = document.getElementById("submit")` is null because it has not been parsed yet, an then `button.onclick` throws. — Oriol, Oct 10 '16 at 00:32
@Tibrogargan so class name cannot be called by getElementById? what if i want to keep a container under class name for formatting purposes for example, but want to also get that element: can i give it a class name and an id? what would be the best way to approach this. — ShadowBlade, Oct 10 '16 at 00:33
@ShadowBlade No, you would use getElementsByClassName for that (returns an array, not a single element. Since id is unique and classes aren't). There's a number of things like this (as Oriol points out), but start by fixing all the `id`/`class` selection issues. An element can have both a class and an id (and a name [when an input in a form], and a tag) all of these can be used to select it. They are separate concepts. — Tibrogargan, Oct 10 '16 at 00:35
Well `getElementById()` is a selector query and it does exactly what it says... get.... element... by... id. Not by class. You can keep the class name in and use `getElementsByClassName()` but notice element(S). It will not return single element so you might find it easier to just add `id="content"` to the html element for your javascript to function correctly. — NewToJS, Oct 10 '16 at 00:38
@Tibrogargan okay, ive got those fixed, i dont know how to fix the button throwing a null though, and ive got a new error where the outputMessage is not an object so the insertBefore function wont work. Am i using the wrong function to get the output of the function printed above my form? — ShadowBlade, Oct 10 '16 at 00:39
@ShadowBlade try placing `var button =document.getElementById("submit");button.onclick = function().....` into `window.onload=function(){//HERE}` this will then only trigger once the page has loaded and the browser knows of those elements. Trying to attach an event to an element before the browser knows it exists will result in errors. — NewToJS, Oct 10 '16 at 00:41
@NewToJS thanks ill keep that in mind, i followed a suggestion in the other thread and moved my embedded script section down to just before the body closing tag, that solved the button not being parsed or whatever was happening. But I still am not sure what to do about turning the outputMessage into an object. — ShadowBlade, Oct 10 '16 at 00:43
@ShadowBlade No offense, but look at the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore). Both arguments for insertBefore are a `Node`, not a string (outputMessage is a string). You could fix that by making a `Node` out of it with `document.createTextNode(outputMessage)` — Tibrogargan, Oct 10 '16 at 00:43

getElementById and button are null

0 Answers0