为什么我有一个document.getElementById为Null？

时间：2019-03-15 03:25:28

标签： javascript dom null

在尝试为一个班级的小型​​游戏创建脚本时，我在加载脚本本身时遇到了问题。我一直在找回信息，说类型错误：document.getElementById为Null。我对Javascript和编码一般还是很陌生，所以我对它的含义和解决方法感到困惑。该网页看起来不错，但是完全没有任何功能。我将为您保留所有代码。问题出在Javascript部分，谢谢您的帮助。

window.onload = function() {
  document.getElementById("userInput").value = "";

  document.getElementById("img1").onmouseover = function(evt) {
    swapImageClass("img1", 2, "onmouseover");
  } // img1 onmouseover event

  document.getElementById("img2").onmouseover = function(evt) {
    swapImageClass("img2", 2, "onmouseover");
  } // img2 onmouseover event

  document.getElementById("img3").onmouseover = function(evt) {
    seapImageClass("img3", 2, "onmouseover");
  } // img3 onmouseover event

  document.getElementById("img1").onmouseout = function(evt) {
    swapImageClass("img1", 1, "onmouseout");
  } // img1 onmouseout event

  document.getElementById("img2").onmouseout = function(evt) {
    swapImageClass("img2", 1, "onmouseout");
  } // img2 onmouseout event

  document.getElementById("img3").onmouseout = function(evt) {
    swapImageClass("img3", 1, "onmouseout");
  } // img3 onmouseout event

  document.getElementById("img3").onclick = function(evt) {
    swapImageClass("img3", 3, "onclick");
  } // img3 onclick event

  document.getElementById("userInput").onblur = function(evt) {
    addEventOutputTracking("onblur", "userInput", "current value of userinput field: \"" + document.getElementById("userInput").value + "\"");
  } // userInput onblur event

  document.getElementById("processUserText").onclick = function(evt) {
    addEventOutputTracking("onclick", "processUserText", "processed value of userinput field: \"" + document.getElementById("userInput").value + "\"");
  } // userInput onclick event

  document.getElementById("clearOutput").onclick = function(evt) {
    resetOutput();
  } // clearOutput onclick event

} // end window.onload

function swapImageClass(imageID, imageState, eventName) {
  var outputText = "Event action on element ID " + imageID;
  addEventOutputTracking(eventName, outoutText, "");

  document.getElementById(imageID).className = "img" + imageState;
} // end function swapImageClass

function addEventOutputTracking(eventName, outputText, extraText) {
  var node; // for element to add child element later
  var pChildNode = document.createElement("p"); // new element that will be child of node

  // new document parts created, so add them to document
  node = document.getElementById("eventOutput"); // existing div we are adding to
  node.appendChild(pChildNode); // adding p element as child of div
  pChildNode.appendChild(document.createTextNode("User Event: " + eventName + " - " + outputText + " " + extraText)); // adding text to new p element
} // end function addEventOutputTracking

function resetOutput() {
  var node = document.getElementById("eventOutput");
  while (node.firstChild)
    node.removeChild(node.firstChild);

  node.appendChild(document.createTextNode("Recently Cleared - Space is reserved for event output information"));
} // end function resetOutput
.img1 {
  margin: 5px 5px 5px 5px;
  border: 3px solid blue;
}

.img2 {
  margin: 5px 5px 5px 5px;
  border: 3px dashed green;
}

.img3 {
  margin: 5px 5px 5px 5px;
  border: 3px dotted red;
}

span {
  padding: 5px 10px 5px 10px;
  background-color: #00FFFF;
}

#eventOutput {
  border: 1px solid red;
  width: 620px;
  padding: 10px;
  front-size: small;
  color: blue;
  background-color: #FFFF99
}

#firstP {
  front-style: italic;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Lesson 8 \code Sample - DOM</title>

  <script type="text/javascript" src="lesson-8.js"></script>
  <link rel="stylesheet" type="text/css" href="lesson-8.css">

</head>

<body>
  <p>
    <img class="img1" id="img1" src="one.gif" />
    <img class="img1" id="img2" src="two.gif" />
    <img class="img1" id="img3" src="three.gif" />
    <p>

      <p>
        <input id="userinput" type="text" size="50" /><br /> User Input Text
      </p>

      <p>
        <span id="processUserText">Process Input</span>
        <span id="clearOutput">Reset Output</span>
      </p>

      <div id="eventOutput">
        <p id="firstP">This space is reserved for event output information</p>
      </div>
</body>

</html>

1 个答案:

答案 0 :(得分：2)

您是如此亲密！在整个代码中输入非常小的错字。

在您的JavaScript中，您有document.getElementById("userInput")。但是，在您的html中，id实际上是userinput。注意区别吗？ HTML ID区分大小写

只需将html中的id更改为userInput 

window.onload = function() {
  document.getElementById("userInput").value = "";

  document.getElementById("img1").onmouseover = function(evt) {
    swapImageClass("img1", 2, "onmouseover");
  } // img1 onmouseover event

  document.getElementById("img2").onmouseover = function(evt) {
    swapImageClass("img2", 2, "onmouseover");
  } // img2 onmouseover event

  document.getElementById("img3").onmouseover = function(evt) {
    seapImageClass("img3", 2, "onmouseover");
  } // img3 onmouseover event

  document.getElementById("img1").onmouseout = function(evt) {
    swapImageClass("img1", 1, "onmouseout");
  } // img1 onmouseout event

  document.getElementById("img2").onmouseout = function(evt) {
    swapImageClass("img2", 1, "onmouseout");
  } // img2 onmouseout event

  document.getElementById("img3").onmouseout = function(evt) {
    swapImageClass("img3", 1, "onmouseout");
  } // img3 onmouseout event

  document.getElementById("img3").onclick = function(evt) {
    swapImageClass("img3", 3, "onclick");
  } // img3 onclick event

  document.getElementById("userInput").onblur = function(evt) {
    addEventOutputTracking("onblur", "userInput", "current value of userinput field: \"" + document.getElementById("userInput").value + "\"");
  } // userInput onblur event

  document.getElementById("processUserText").onclick = function(evt) {
    addEventOutputTracking("onclick", "processUserText", "processed value of userinput field: \"" + document.getElementById("userInput").value + "\"");
  } // userInput onclick event

  document.getElementById("clearOutput").onclick = function(evt) {
    resetOutput();
  } // clearOutput onclick event

} // end window.onload

function swapImageClass(imageID, imageState, eventName) {
  var outputText = "Event action on element ID " + imageID;
  addEventOutputTracking(eventName, outoutText, "");

  document.getElementById(imageID).className = "img" + imageState;
} // end function swapImageClass

function addEventOutputTracking(eventName, outputText, extraText) {
  var node; // for element to add child element later
  var pChildNode = document.createElement("p"); // new element that will be child of node

  // new document parts created, so add them to document
  node = document.getElementById("eventOutput"); // existing div we are adding to
  node.appendChild(pChildNode); // adding p element as child of div
  pChildNode.appendChild(document.createTextNode("User Event: " + eventName + " - " + outputText + " " + extraText)); // adding text to new p element
} // end function addEventOutputTracking

function resetOutput() {
  var node = document.getElementById("eventOutput");
  while (node.firstChild)
    node.removeChild(node.firstChild);

  node.appendChild(document.createTextNode("Recently Cleared - Space is reserved for event output information"));
} // end function resetOutput
.img1 {
  margin: 5px 5px 5px 5px;
  border: 3px solid blue;
}

.img2 {
  margin: 5px 5px 5px 5px;
  border: 3px dashed green;
}

.img3 {
  margin: 5px 5px 5px 5px;
  border: 3px dotted red;
}

span {
  padding: 5px 10px 5px 10px;
  background-color: #00FFFF;
}

#eventOutput {
  border: 1px solid red;
  width: 620px;
  padding: 10px;
  front-size: small;
  color: blue;
  background-color: #FFFF99
}

#firstP {
  front-style: italic;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Lesson 8 \code Sample - DOM</title>

  <script type="text/javascript" src="lesson-8.js"></script>
  <link rel="stylesheet" type="text/css" href="lesson-8.css">

</head>

<body>
  <p>
    <img class="img1" id="img1" src="one.gif" />
    <img class="img1" id="img2" src="two.gif" />
    <img class="img1" id="img3" src="three.gif" />
    <p>

      <p>
        <input id="userInput" type="text" size="50" /><br /> User Input Text
      </p>

      <p>
        <span id="processUserText">Process Input</span>
        <span id="clearOutput">Reset Output</span>
      </p>

      <div id="eventOutput">
        <p id="firstP">This space is reserved for event output information</p>
      </div>
</body>

</html>

相关问题
最新问题