...

View Full Version : Dropdown list doesnt change image



jdruwe
12-27-2011, 01:30 PM
Hey i am using a dropdown list to change an image but i doesnt work

Javascript:


addEventListener("load", configurator, false);

function configurator() {
var model = document.getElementById("Model").value
var afbeelding = document.getElementById("modelafbeelding")



switch (model) {
case "Audi A1":

var foto = "./images/audia1.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A3":

var foto = "./images/audia3.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A4":

var foto = "./images/audia4.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A5":

var foto = "./images/audia5.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A6":

var foto = "./images/audia6.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi R8":

var foto = "./images/audir8.png"

afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;


}
}



HTML:


<tr>
<td><select id="Model" name="Model">
<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>
<div id="modelafbeelding"></div>
</tr>

Philip M
12-27-2011, 02:40 PM
var model = document.getElementById("Model").value
<option>Audi A1</option>


You have not assigned any values to the select list options, nor is any option initially selected.

<option value = "Audi A1" selected >Audi A1</option>


I find her incredibly credible. - Presenter, BBC FRadio 1

jdruwe
12-27-2011, 02:50 PM
var model = document.getElementById("Model").value
<option>Audi A1</option>


You have not assigned any values to the select list options, nor is any option initially selected.

<option value = "Audi A1" selected >Audi A1</option>


I find her incredibly credible. - Presenter, BBC FRadio 1

i edit my html:


<tr>

<td><select id="Model" name="Model">
<option value = "Audi A1" selected >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>
<div id="modelafbeelding"></div>
</tr>


but i dont know what to edit in javascript (sorry kinda new to javascript )

Philip M
12-27-2011, 03:04 PM
You need to assign a value to all the select list options, not just the first one!!

You would do best to simplify the code by placing your images in an array (named say myphotos) and the rather than a switch statement simply use the selectedIndex of the select list to show the appropriate photo. In that case you do not need to assign any values to the options.




var myphotos = [];
myphotos[0] = "./images/audia1.png";
myphotos[1] = "./images/audia3.png";
// and so on .....

var si = document.getElementById("Model").selectedIndex;
var foto = myphotos[si]; // example: if si == 0 then foto = "./images/audia1.png"
var afbeelding = document.getElementById("modelafbeelding");
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");

jdruwe
12-27-2011, 04:11 PM
You need to assign a value to all the select list options, not just the first one!!

You would do best to simplify the code by placing your images in an array (named say myphotos) and the rather than a switch statement simply use the selectedIndex of the select list to show the appropriate photo. In that case you do not need to assign any values to the options.




var myphotos = [];
myphotos[0] = "./images/audia1.png";
myphotos[1] = "./images/audia3.png";
// and so on .....

var si = document.getElementById("Model").selectedIndex;
var foto = myphotos[si]; // example: if si == 0 then foto = "./images/audia1.png"
var afbeelding = document.getElementById("modelafbeelding");
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");



addEventListener("load", configurator, false);

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("Model").selectedIndex;
var foto = myphotos[si];
var afbeelding = document.getElementById("modelafbeelding");
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
}


it doesnt work automatic i have to refresh the page to get the selected image

Philip M
12-27-2011, 04:34 PM
it doesnt work automatic i have to refresh the page to get the selected image

Well, yes. You need to call the function when the select list changes:-


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

jdruwe
12-27-2011, 04:38 PM
Well, yes. You need to call the function when the select list changes:-


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

Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick) .... is there an alternative?

Philip M
12-27-2011, 04:45 PM
Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick) .... is there an alternative?

If I had known it was homework I would have not given you so much assistance. See forum rule #1.5

There is no point in your school making up silly rules such as not using Javascript events in HTML. That is the normal way a select list operates - using onchange. How do they expect you to learn anything?

jdruwe
12-27-2011, 04:46 PM
If I had known it was homework I would have not given you so much assistance. See forum rule #1.5

There is no point in your school making up silly rules such as not using Javascript events in HTML. That is the normal way a select list operates - using onchange. How do they expect you to learn anything?

I know it is silly thats why i ask for an alternative, and it isnt homework its just an optional thing we can do withouth getting any grades

Philip M
12-27-2011, 05:32 PM
I know it is silly thats why i ask for an alternative, and it isnt homework its just an optional thing we can do withouth getting any grades

Which makes the silly restriction on Javascript events even sillier.

xelawho
12-27-2011, 06:51 PM
Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick)

I think you need to read the instructions again. As Philip M points out, not being able to call functions from html elements requires you to jump through endless, unnecessary hoops and will result in some quite absurd coding.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum