javascript - Cannot get function to change pictures to work -

javascript - Cannot get function to change pictures to work -

i have updated code still not seem work have validates js file pointed correctly when click alternative image refuses update.

here's code:

class="snippet-code-js lang-js prettyprint-override">function color() { if (document.getelementbyid('carcolor').value == 'red') { document.getelementbyid('car_pic').src = 'image/red.jpg'; } if (document.getelementbyid('carcolor').value == 'blue') { document.getelementbyid('car_pic').src = 'image/blue.jpg'; } if (document.getelementbyid('carcolor').value == 'silver') { document.getelementbyid('car_pic').src = 'image/silver.jpg'; } if (document.getelementbyid('carcolor').value == 'white') { document.getelementbyid('ccar_pic').src = 'image/white.jpg'; } if (document.getelementbyid('carcolor').value == 'black') { document.getelementbyid('car_pic').src = 'image/black.jpg'; } } checkcolor(); class="snippet-code-html lang-html prettyprint-override"><div id="select1"> <h1>choose color</h1> <select name="color" size="5" id="carcolor"> <option value="red">red</option> <option value="blue">blue</option> <option value="silver">silver</option> <option value="white">white</option> <option value="black">black</option> </select> <img src="" alt="car picture" id="car_pic"> </div>

multiple problems:

id can't contain whitespaces you using wrong ids in js you attaching ids wrong elements in html you calling checkcolor defined function color. better avoid inline event handlers avoid getting same dom element multiple times, improve store in variable you utilize if conditionals in wrong way. instead of many conditionals, utilize object gives url of image given selected value.

class="snippet-code-js lang-js prettyprint-override">var sel = document.getelementbyid('select1'), img = document.getelementbyid('car_pic'), imgurls = { red: 'image/red.jpg', blue: 'image/blue.jpg', silver: 'image/silver.jpg', white: 'image/white.jpg', black: 'image/black.jpg' }; function checkcolor() { img.src = imgurls[sel.value]; } sel.onchange = checkcolor; checkcolor(); class="snippet-code-html lang-html prettyprint-override"><div> <h1>choose color</h1> <select name="color" size="5" id="select1"> <option value="red">red</option> <option value="blue">blue</option> <option value="silver">silver</option> <option value="white">white</option> <option value="black">black</option> </select> <img src="" alt="car picture" id="car_pic"> </div>

if image urls follow same pattern, consider

class="lang-js prettyprint-override">img.src = 'image/' + sel.value + '.jpg';

class="snippet-code-js lang-js prettyprint-override">var sel = document.getelementbyid('select1'), img = document.getelementbyid('car_pic'); function checkcolor() { img.src = 'image/' + sel.value + '.jpg'; } sel.onchange = checkcolor; checkcolor(); class="snippet-code-html lang-html prettyprint-override"><div> <h1>choose color</h1> <select name="color" size="5" id="select1"> <option value="red">red</option> <option value="blue">blue</option> <option value="silver">silver</option> <option value="white">white</option> <option value="black">black</option> </select> <img src="" alt="car picture" id="car_pic"> </div>

javascript