Select Box onchange Update Несколько элементов

Question

Я пытаюсь получить окно выбора, чтобы использовать функцию onchange для обновления нескольких элементов, окружающих его. Вот мой код до сих пор:

function picture() { 
var imglink; 
var imgprice; 
var picture_type = document.getElementById('picture_type').value; 
if ("picture_type" == "1") { 
    imglink = "img1.png"; 
    imgprice = "$xx.xx"; 
} 
if("picture_type" == "2") { 
    imglink = "img2.png"; 
    imgprice = "$xxx.xx"; 
} 
else { 
    document.getElementById('iphoneprice').style.display = 'none'; 
} 
document.getElementById('phoneimg').src = imglink; 
document.getElementById('iphoneprice').innerHTML = imgprice; 
} 

И соответствующий HTML:

<select id="picture_type" onchange="picture()"> 
<option value="1">iPhone 4</option> 
<option value="2">iPhone 4S</option> 
</select> 
<p id="iphoneprice"></p> 
<img id="iphoneimg" src="" /> 

Как я мог сделать это успешно обновить эти две переменные одновременно?

Answer 1

У вас есть опечатка (getElementById('phoneimg') должно быть getElementById('iphoneimg')) и цитирует имена переменных. Это должно работать:

function picture() { 
    var imglink; 
    var imgprice; 
    var picture_type = document.getElementById('picture_type').value; 
    if (picture_type == "1") { 
     imglink = "img1.png"; 
     imgprice = "$xx.xx"; 
    } 
    else if(picture_type == "2") { 
     imglink = "img2.png"; 
     imgprice = "$xxx.xx"; 
    } else { 
     document.getElementById('iphoneprice').style.display = 'none'; 
    } 
    document.getElementById('iphoneimg').src = imglink; 
    document.getElementById('iphoneprice').innerHTML = imgprice; 
} 

jsFiddle example