Threaded Mode | Linear Mode

Merrystove369 · 04-28-2014, 06:23 PM

I am trying to change the text in the div with an id of "visitedOutput" if the user has previously visited the page.
Where ***** is, google Chrome says "cannot set property 'innerHTML' of null" in the console.
I tried everything, even changing .innerHTML to .innerText, but nothing worked. Chrome kept saying the same thing.
It doesn't work in all the other browsers either.
In case your wondering, I am using Win 8 in the desktop
Code:
HTML:
_______________________________________________
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Input Test</title>
<script src="script.js"></script>
</head>
<body>
<h1>AJAX coming soon</h1>


<fieldset>
<legend>See your Input</legend>
<label for="textInput"> Type Here </label>
<input type="text" id="textInput" />
<button onclick="submit()" type="submit">Submit</button>
<br />
<textarea rows="20" cols="40" id="replaceText">This space shows you what you typed!</textarea>
</fieldset>

<fieldset>
<legend>Change Box Color</legend>
<div id="box"></div>
<button type="button" onclick="changeColor()" type="submit">Change Color</button>
</fieldset>
<fieldset>
<legend>See if you've been here already</legend>



<div id="visitedOutput">Hello</div>
<button id="clearhis" onclick="localStorage.clear(); sessionStorage.clear();">Clear History</button>
</fieldset>


<button onclick="getFile()">Retrieve Text from Server</button>
</body>
</html>

J
________________________________________________________________

var visitedTimes = 0;
var visitedOutput = document.getElementById("visitedOutput");
//First check webStorage compatibility
//Check to see if the client has been here or not
if (typeof(Storage !== "undefined")){
if (localStorage.getItem("visited") == "true") {

******visitedOutput.innerHTML="You've been here! Welcome back for the " + visitedTimes + " time";

}else{
localStorage.setItem("visited","true");
document.write("Welcome for the first time!");
}
}else{
document.write("Sorry! Your browser does not support HTML5 webStorage");
}

//___________________________I just included this part for additional reference______________
//Input Test Code
function submit(){
var textField = document.getElementById("textInput");
var textInput = textField.value;
var replaceText = document.getElementById("replaceText");
replaceText.innerHTML = textInput;
}

//CSS in javascript
//var box = document.getElementById("box");

var state = 0;
console.log("Initial State " + state);
function changeColor(){
if (state == 1){
console.log("Changing to red because state is " + state);
document.getElementById("box").style.backgroundColor = "red";
state = 0;
console.log(state);
}else if (state == 0 || state == null){
console.log("Changing to blue because state is " + state);
document.getElementById("box").style.backgroundColor = "blue";
state = 1;
console.log(state);
}else {
document.write("Sorry");
document.write(state);
console.log(state);
};
};

//AJAX Time
//_____________________________________________________________________________________________________________________________________________________________________________________
function getFile(){
var request = new XMLHttpRequest();
request.open("GET", "file.txt", false);
request.send(null);
console.log("request sent");
if (request.status ==200){
console.log(request.status);
document.open();
document.write(request.responseText);
}else{
console.log(request.status);
alert(request.status + " " + request.statusText);
}
}

Dominic · 04-28-2014, 06:28 PM

JavaScript blocks the webpage from loading while it's executing. The browser begins reading the page, gets to your script tag then stops loading the rest of the HTML while the script is running. Nothing below the script tag exists at this point so if code is trying to reach a HTML element past the script tag it's going to fail and that's why you're getting the error message.

One solution is to move your script tag to just before the closing body tag. That way the page will have loaded before your JavaScript begins executing and your code will be able to access all the HTML elements above it.

â€“ Dominic