Penny Arcade Forums› Help / Advice Forum
The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.

JavaScript Help

SentrySentry Registered User regular
in Help / Advice Forum
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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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&quot; />
<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&quot; 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&quot; 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><!--end of wrapper-->



</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);
}

[SIGPIC][/SIGPIC]
wrote:
When I was a little kid, I always pretended I was the hero,' Skip said.
'Fuck yeah, me too. What little kid ever pretended to be part of the lynch-mob?'

Posts

  • InfidelInfidel Heretic Registered User regular
    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.

    OrokosPA.png
  • BarrakkethBarrakketh Registered User regular
    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.

    Rollers are red, chargers are blue....omae wa mou shindeiru
  • SentrySentry Registered User regular
    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.

    [SIGPIC][/SIGPIC]
    wrote:
    When I was a little kid, I always pretended I was the hero,' Skip said.
    'Fuck yeah, me too. What little kid ever pretended to be part of the lynch-mob?'
  • InfidelInfidel Heretic Registered User regular
    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.

    OrokosPA.png
  • bowenbowen Sup? Registered User regular
    jQuery takes the shitty parts of JavaScript out, like, waiting for the DOM to be ready to use.

    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • SentrySentry Registered User regular
    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.

    [SIGPIC][/SIGPIC]
    wrote:
    When I was a little kid, I always pretended I was the hero,' Skip said.
    'Fuck yeah, me too. What little kid ever pretended to be part of the lynch-mob?'
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    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.

    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • bowenbowen Sup? Registered User regular
    Or get the object on the onclick of the image instead of before it's run.

    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
Sign In or Register to comment.
Penny Arcade Forums› Help / Advice Forum