...

View Full Version : onchange doesnt work



jdruwe
01-02-2012, 12:01 PM
Hey guys

I have a stupid problem, my teacher asked us to DONT use javadscript in html (like onchange ="....")

If i use following js in html my page works:

<select id="car" name="car" onchange="configurator()">

If i delete that last piece and try to code it in a .js file like:

document.getElementsById("car").onchange = configurator;

it doesnt work, it doest recognize the .onchange method

Thanks in advance

_Aerospace_Eng_
01-02-2012, 12:17 PM
Double check your javascript. I will give you a hint, you will only have one element with one ID. IDs cannot be duplicated on the same page.

coothead
01-02-2012, 12:22 PM
Hi there jdruwe,

your problem is probably the result of a typing error here...

document.getElementsById("car").onchange = configurator;
It should be...

document.getElementById("car").onchange = configurator;
coothead

jdruwe
01-02-2012, 12:23 PM
Double check your javascript. I will give you a hint, you will only have one element with one ID. IDs cannot be duplicated on the same page.

So i cant have another "var carC = document.getElementsById("car").value" ?

_Aerospace_Eng_
01-02-2012, 12:27 PM
No that isn't what I said at all. Read coothead's post. It tells you exactly what you did wrong and will allow you to understand my post better. Since this was an assignment I was trying not to give you the answer.

jdruwe
01-02-2012, 12:31 PM
Hi there jdruwe,

your problem is probably the result of a typing error here...

document.getElementsById("car").onchange = configurator;
It should be...

document.getElementById("car").onchange = configurator;
coothead

No sorry it was a typo n this forum in my .js its good but i get only the other methods like .onclick, .onfocus, ...

_Aerospace_Eng_
01-02-2012, 12:37 PM
When do you use document.getElementById? Before or After your page loads?

jdruwe
01-02-2012, 12:39 PM
When do you use document.getElementById? Before or After your page loads?

after, i work with addEventListener("load",init,false)

coothead
01-02-2012, 12:41 PM
Hi there jdruwe,

is your code similar to this. :D


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">
function init(){
document.getElementById('car').onchange=configurator;
}
function configurator(){
alert(this.value);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div>
<select id="car" name="car">
<option value="">options</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</div>

</body>
</html>

coothead

jdruwe
01-02-2012, 12:43 PM
Hi there jdruwe,

is your code similar to this. :D


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">
function init(){
document.getElementById('car').onchange=configurator;
}
function configurator(){
alert(this.value);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div>
<select id="car" name="car">
<option value="">options</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</div>

</body>
</html>

coothead

similar without the:
value=".."
window.addEventListener?
window.attachEvent('onload',init);

_Aerospace_Eng_
01-02-2012, 12:44 PM
I just tested this locally on my machine in Chrome and it worked fine. You need to post the rest of your javascript and your html.

jdruwe
01-02-2012, 12:48 PM
I just tested this locally on my machine in Chrome and it worked fine. You need to post the rest of your javascript and your html.

JS


addEventListener("load", init, false);


function init(event) {
var form = document.forms["formulier"];
form.addEventListener("submit", bepalen, false);
document.getElementById("Wagen").onchange = configurator;
}


function bepalen(){


var wagenC = document.getElementById("Wagen").value
var uitvoeringC = document.getElementById("uitvoering").value
var motorisatieC = document.getElementById("motorisatie").value
var versnellingsbakC = document.getElementById("versnellingsbak").value
var kleurC = document.getElementById("Kleur").value
var zetelbekledingC = document.getElementById("Zetelbekleding").value
var stuurC = document.getElementById("Stuur").value

setSessionCookie("Wagen", wagenC);
setSessionCookie("Uitvoering", uitvoeringC);
setSessionCookie("Motorisatie", motorisatieC);
setSessionCookie("Versnellingsbak", versnellingsbakC);
setSessionCookie("Kleur", kleurC);
setSessionCookie("Zetelbekleding", zetelbekledingC);
setSessionCookie("Stuur", stuurC);

function setSessionCookie(name, value) {
document.cookie = name + "=" + value;
}

}

function configurator() {

var myphotos = [];
myphotos[0] = "./images/audia1.png";
myphotos[1] = "./images/audia3.png";
myphotos[2] = "./images/audia4.png";
myphotos[3] = "./images/audia5.png";
myphotos[4] = "./images/audia6.png";
myphotos[5] = "./images/audir8.png";

var si = document.getElementById("Wagen").selectedIndex;
var foto = myphotos[si];
var afbeelding = document.getElementById("modelafbeelding");
afbeelding.innerHTML = ("<img class='sizedmodelconfig' src='" + foto + "'>");

}



HTML


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<script type="text/javascript" src="scripts/configurator.js"></script>
<title>Audi</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
</head>
<body>
<div class="container">
<div class="content">
<img src="./images/Logo.png" class="sizedlogo" alt="Audi logo"/>

<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="configurator.html">Configurator</a></li>
<li><a href="dealers.html">Dealers</a></li>
<li><a href="modellen.html">Modellen</a></li>
<li><a href="proefrit.html">Proefrit</a></li>
</ul>
</div>
<form id="formulier" action="samenvatting.html">
<fieldset id="ModelFS">
<legend>Model</legend>
<table class="tabelgegevens">
<tr>

<td><select id="Wagen" name="Wagen">
<option>Audi A1</option>
<option>Audi A3</option>
<option>Audi A4</option>
<option>Audi A5</option>
<option>Audi A6</option>
<option>Audi R8</option>
</select></td>
</tr>
</table>
<br>

<div id="modelafbeelding"></div>
</fieldset>

<br>


<fieldset id="OnderdelenFS">
<legend>Onderdelen</legend>
<table class="tabelgegevens">


<tr>
<td><label for="uitvoering">Uitvoering</label></td>
<td><select id="uitvoering" name="uitvoering">

<option>Luxe</option>
<option>Sport</option>
<option>Reference</option>
<option>Style</option>
</select></td>
</tr>


<tr>
<td><label for="motorisatie">Motorisatie</label></td>
<td><select id="motorisatie" name="motorisatie">

<option>Benzine 102 kw/pk</option>
<option>Benzine 134 kw/pk</option>
<option>Diesel 105 kw/pk</option>
<option>Diesel 143 kw/pk</option>
</select></td>
</tr>


<tr>
<td><label for="versnellingsbak">versnellingsbak</label></td>
<td><select id="versnellingsbak" name="versnellingsbak">
<option>5 versnellingen</option>
<option>6 versnellingen</option>
<option>7 versnellingen</option>
</select></td>
</tr>


<tr>
<td><label for="Kleur">Kleur</label></td>
<td><select id="Kleur" name="Kleur">

<option>Rood</option>
<option>Groen</option>
<option>Paars</option>
<option>Geel</option>
<option>Blauw</option>
<option>Roze</option>
<option>Grijs</option>
</select></td>
</tr>


<tr>
<td><label for="Zetelbekleding">Zetelbekleding</label></td>
<td><select id="Zetelbekleding" name="Zetelbekleding">

<option>Leder</option>
<option>Katoen</option>
</select></td>
</tr>


<tr>
<td><label for="Stuur">Stuur</label></td>
<td><select id="Stuur" name="Stuur">

<option>Standaard</option>
<option>Sportstuur</option>
<option>Multifunctioneel sportstuur</option>
</select></td>
</tr>


</table>
</fieldset>
<p></p>
<fieldset id="Gaverder">
<legend>Ga verder</legend>
<input id="samenvatting" name="samenvatting" type="submit" value="Offerte"/>

</fieldset>
</form>
<div class="footerlijn">
<p class="footer">D’Ieteren N.V. Audi Import Leuvensesteenweg 639 3071 Kortenberg
<a href="http://www.facebook.com/AudiBelgium"><img class="facebooklink" src="./images/facebook.jpg"
alt="Audi logo"/></a></p>
</div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
01-02-2012, 12:54 PM
Just tried your code too and it works in Chrome. So now the question to ask is are you testing this in Internet Explorer? If so which version? It works in IE 9 for me as well. I believe IE 8 and below use window.attachEvent, not window.addEventListener.

jdruwe
01-02-2012, 12:55 PM
Just tried your code too and it works in Chrome. So now the question to ask is are you testing this in Internet Explorer?

No, in firefox

jdruwe
01-02-2012, 12:56 PM
No, in firefox

Sorry for doublepost , yea indeed firefox doesnt support that, is there a way to make it work cause they will only test my project in firefox

coothead
01-02-2012, 12:58 PM
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

coothead

jdruwe
01-02-2012, 01:02 PM
Sorry for doublepost , yea indeed firefox doesnt support that, is there a way to make it work cause they will only test my project in firefox

K guys found a way i works now i wanne thank you people for helping me out

_Aerospace_Eng_
01-02-2012, 01:05 PM
Are you using the code coothead posted? Do you understand how it works or did you just copy and paste it?

jdruwe
01-02-2012, 06:37 PM
Are you using the code coothead posted? Do you understand how it works or did you just copy and paste it?

No i am not i am almost to shamed to tell but firefox only shows me the pic with an internet connection XD my wireless was disabled ^^



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum