javascript - 选择框 onchange 更新多个项目

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