Form button 'Cannot set property 'onclick' of null'

Question

I can't determine what is 'null'. I think it may be the form button, because of the form and button ids aren't the same... The console is saying the problem is on the 'button1.onclick = createParagraph;' line. Please help.

Below is my javascript

//global variables for user input
var noun1;
var noun2;
var adjective1;
var adjective2;
var verb1;
var verb2;
var paragraph1 = "hello, did this work?"
var button1 = document.getElementById("pushMe")

//to retrieve values from user input, and write to global variables
function handleSubmit(form) {
  noun1 = form.querySelector('input[name=noun1]').value;
  noun2 = form.querySelector('input[name=noun2]').value;
  adjective1 = form.querySelector('input[name=adjective1]').value;
  adjective2 = form.querySelector('input[name=adjective2]').value;
  verb1 = form.querySelector('input[name=verb1]').value;
  verb2 = form.querySelector('input[name=verb2]').value;

  return false;
}

//to write paragraph to the DOM
function createParagraph () {
  var element = document.createElement("p");
  var content = document.createTextNode("paragraph1");
  var location = document.getElementById("placeholder");
  element.appendChild(content);
  document.body.insertBefore(element,location);
}

//run it all!
button1.onclick = createParagraph;

Below is HTML

    <!DOCTYPE html>
<html>
  <head>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="stylesheets/madlib.css">
    <script src="randomMad.js"></script>
    <title>Mad Libs!</title>
  </head>
  <header>

  </header>
  <body>
    <form onsubmit="return handleSubmit(this)" id="form1">
      <h1>Choose your words!</h1>
      <fieldset>
        <label>First Noun: <input type="text" name="noun1" ></label><br>
        <label>Second Noun: <input type="text" name="noun2"></label><br>
        <label>First Adjective: <input type="text" name="adjective1"></label><br>
        <label>Second Adjective: <input type="text" name="adjective2"></label><br>
        <label>First Verb: <input type="text" name="verb1"></label><br>
        <label>Second Verb: <input type="text" name="verb2"></label><br>
      </fieldset>
      <button type="submit" id="pushMe">Create Mad Lib</button>
    </form>
    <div id="placeholder">

    </div>
  </body>

is randomMad.js where the above script is included? – AtheistP3ace Nov 09 '15 at 15:20 — AtheistP3ace, Nov 09 '15 at 15:20
Yes, that is the reference to the script file. – maxwelldem Nov 10 '15 at 05:26 — maxwelldem, Nov 10 '15 at 05:26

Lal · Accepted Answer · 2015-11-09T15:24:09.877

1

You are missing ; in some of your lines..

See

var paragraph1 = "hello, did this work?"
var button1 = document.getElementById("pushMe")

Kindly add a ; at the end of that two lines.

UPDATE

The error may be causing because you are trying to access the element before the DOM has finished loading. Thus to solve that problem, you can just move

<script src="randomMad.js"></script>

to the end of <body> .

edited Nov 09 '15 at 15:24

answered Nov 09 '15 at 15:20

Lal

14,505
4
39
63

2

I may be wrong here, but javascript can still run with semicolons omitted, so I don't think this is the issue. *Edit* Nevermind, it is required when using `"`, `'` or `()`. – Tim Lewis Nov 09 '15 at 15:21
Yes thats right.. @TimLewis .. Just to make sure that it is not the problem, he should try ending those lines with a `;`. I've updated my asnwer.. – Lal Nov 09 '15 at 15:25

Form button 'Cannot set property 'onclick' of null'

1 Answers1