While attempting to create a script for a small game for a class, I have been having problems geting the script itself to load. I keeping getting information back saying type error: document.getElementById is Null. I am very new to Javascript and coding in general so I am both confused as to what it means and how to fix it. The webpage looks right, but there is no fuction at all. I will leave you the code for all of it. The problem is with the Javascript portion thank you for your help.
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>
