Basically what it should do is when an image is clicked images need to be swapped and the background needs to change color. The script doesn’t work but it doesn’t throw any errors either. Anyone got an idea why it does not work?
Ah you found the error. The paths are correct but the assignment to the different variables is not.
What I want to do is have a var pointing to an image via .src attribute.
I want the schakelaar_aan to contain the image of the on-switch and schakelaar_off to contain the image of the off-switch. Same for the light.
Apparently you can’t store an attribute value into a variable?
and ill have to take me refuge to
You didn’t need the “= licht.src =” in the middle, just “=”. You were assigning the new src to the actual image by doing that. And yes, you can assign the value of an attribute to a variable, but there is no point as you are going to be comparing it and then changing it immediately afterwards.
Also note how I used the “var” statement. That is to avoid the use of global variables, which are a Bad Thing.
But wait a second, hm, the script still doesn’t run. Although everything you have said seemed logic and correct. It still does not change the image when it is clicked on.
The paths are 100% correct since the images display so that is one thing we can exclude.
What else remains?
The starting scenario displays with an image == schakelaar_aan. So this should execute upon clicking or am I wrong?
I just copied over that code, saved it and ran it. Clicking the second image changed the images (I used some local images) and made the background black. So it seems to be working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lichtschakelaar - DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Lichtschakelaar.css" />
<script type="text/javascript">
/* <![CDATA[ */
function kliklamp(){
var licht = document.getElementById("img_licht");
var schakelaar = document.getElementById("img_lichtschklr");
var licht_aan = "http://www.tes.co.uk/magazine/graphics/logo.png";
var licht_uit = "http://www.tes.co.uk/tesassets/images/calculator.png";
var schakelaar_aan = "http://www.tes.co.uk/magazine/graphics/logo.png";
var schakelaar_uit = "http://www.tes.co.uk/tesassets/images/calculator.png";
if (schakelaar.src == schakelaar_aan){
schakelaar.src = schakelaar_uit;
licht.src = licht_uit;
document.body.style.backgroundColor = "#000000";
}
else{
schakelaar.src = schakelaar_aan;
licht.src = licht_aan;
document.body.style.backgroundColor = "#FFFFFF";
}
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div>
<img src="http://www.tes.co.uk/magazine/graphics/logo.png" id="img_licht" alt="licht" />
</div>
<div>
<img src="http://www.tes.co.uk/magazine/graphics/logo.png" id="img_lichtschklr" alt="lichtschakelaar" onclick="kliklamp()" />
</div>
<div>
<p>
Kleertjes uit, pyamaatjes aan,<br />
hoogste tijd om naar bed toe te gaan.<br />
Kijk eens even op de klok,<br />
alle kippetjes zijn al op stok.<br />
Kom, we moeten nu slapen gaan,<br />
kleertjes uit en pyamaatjes aan.
</p>
</div>
</div>
</body>
</html>
I’m using FF3.6. If it doesn’t work with your images, you need to debug it by yourself. The simplest way to do this is to put an alert() at each point you think it might be failing, e.g. just before and just after the src comparison.
So you weren’t lying? Ha you are confusing me, evil one!
Ok I will look into it, thank you for the tip
well it definitely goes wrong here:
if (schakelaar.src == schakelaar_aan){
but why? The images all display so it can’t be a faulty path. I don’t see any other option which could lead to an error. It’s not that I don’t want to search myself but I just don’t see anything else that could be wrong.
Ah but you don’t either so ok it will stay a mistery forever.
Edit: Ah yes nevermind I got it now. It’s the paths
