Question

我无法确定什么是'null'。我认为它可能是表单按钮，因为表单和按钮ID不一样......控制台说问题出现在'button1.onclick = createParagraph;'线。请帮忙。

以下是我的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;

下面是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>

Answer 1

你的某些行中缺少; ..

见

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

请在这两行的末尾添加;。

<强>更新

可能导致错误，因为您在DOM加载完成之前尝试访问该元素。因此，要解决这个问题，你可以移动

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

到<body>的结尾。

表单按钮'无法设置属性'onclick'of null'

1 个答案: