JavaScript Help

Sentry · April 2013

Preface: This was for a class assignment, but it has already been submitted. I couldn't ever get this thing to work so I was hoping someone could help. What's supposed to happen is that every three seconds a new image should show up in the gallery, then turn off when someone clicks an image. What happens instead is nothing... when I run Firebug I get a notice that everything involved with the var slideShow is coming back null. I have no idea why that's happening. Anyone here able to help?

HTML

<!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=UTF-8" />
<meta name="description" content="Photos from this page were borrowed from http://heritage.bentleymotors.com for educational purposes only." />
<link href='http://fonts.googleapis.com/css?family=Italianno' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="http://carrasquilla.faculty.asu.edu/GIT215/Cars.css" />
<script type = "text/javascript" src = "cars.js">
<title>Cars</title>

</head>

<body>
<div id="wrapper">
<div id="header">
<h1><img src="http://carrasquilla.faculty.asu.edu/GIT215/bentley.png" alt="bentley-logo" />HERITAGE BENTLEY</h1>
</div>

<div id="mainContent">
<h2>A Glorious Past</h2>
<p>Hand crafted more than 15 years ago, a Heritage Bentley ensures that its quality is protected in every single way.</p>
<br />
<p>Supported by Bentley's extensive range of genuine parts, each one manufactured to the same specification as the original, to safeguard the ongoing performance and condition of your car.</p>
</div>

<div id="gallery">
<img src="http://carrasquilla.faculty.asu.edu/GIT215/bentley-three-half-litre.jpg" id="bentleyCars" alt="heritage bentley car gallery" />
</div>

<div id="footer">
<p>This site is unofficial and is not real at all.</p>
</div>

</div>

</script>

</body>

</html>

Javascript

//javaScript//

var slideShow = document.getElementById("bentleyCars");
var picArray = ["http://carrasquilla.faculty.asu.edu/GIT215/bentley-continental-flying-spur.jpg",
"http://carrasquilla.faculty.asu.edu/GIT215/bentley-continental-r.jpg",
"http://carrasquilla.faculty.asu.edu/GIT215/bentley-mk-vi.jpg"];
var picCount = 0;

function changePic() {
slideShow.setAttribute("src", picArray[picCount]);
picCount++;
if (picCount >= picArray.length) {
picCount = 0;
}
}
var intervalHandle = setInterval (changePic, 3000);

slideShow.onclick = function() {
clearInterval(intervalHandle);
}

Infidel · April 2013

You call getElementById outside of the function. Save yourself doing it each time? In theory. But when you call it there, in the header, the element you're referencing hasn't loaded yet. The rest of the HTML has not been processed and the DOM has not been created yet. No DOM means a null getElement.

Barrakketh · April 2013

Infidel wrote: »

You call getElementById outside of the function. Save yourself doing it each time? In theory. But when you call it there, in the header, the element you're referencing hasn't loaded yet. The rest of the HTML has not been processed and the DOM has not been created yet. No DOM means a null getElement.

You could attach an event listener for DOMContentLoaded to the document and do your work in the callback.

Sentry · April 2013

hm... okay...
how would I go about getting the DOM to load while still keeping the variable? I have to call to it later in the script.

Infidel · April 2013

Sentry wrote: »

hm... okay...
how would I go about getting the DOM to load while still keeping the variable? I have to call to it later in the script.

If you understand the why, Barrakketh gave the how to work around it.

What you do is no javascript outside the functions except for a callback. Wait for the DOM to be loaded, then you perform this callback which does the "global" stuff you wanted to do in the first place.

How you wait for the DOM and then make the callback is browser specific, which might be the DOMContentLoaded as mentioned. Usually you'll want to use jQuery (or similar) and its $.ready() binding.

bowen · April 2013

jQuery takes the shitty parts of JavaScript out, like, waiting for the DOM to be ready to use.

Sentry · April 2013

Yeah, I know. Unfortunately this is an intro web design course that's really rigid... no jquery allowed. It's really frustrating because I honestly thought I'd been following the basics of Javascript to this point, but nothing I've tried has worked here.

SporkAndrew · April 2013

The old way to do it is to have the include for the javascript as low down on the page as you can get it so it isn't called until the page has been rendered. If you don't feel like figuring out the raw document.ready / DOMContentLoaded etc, it's usually the simple way to get things working.

bowen · April 2013

Or get the object on the onclick of the image instead of before it's run.

Penny Arcade

Quick Links

JavaScript Help

Posts