Question

我正在做一个让我习惯于改变事件处理程序和数组的练习。我要求我做的很麻烦。这是我的代码：

document.getElementById('productID').onchange = function () {
    productID = this.value;
    iName = imageName[productID];
    url = urlBase + iName;
    iPrice = imageName[productID];
    document.getElementById('...').innerHTML = iPrice;
};

以下是说明。

处理选择列表的onchange事件; id＆＃39; productID＆＃39;
以这种方式获取所选水果的产品ID：productID = this.value;
使用parseInt()确保productID值为数字。
使用productID以这种方式引用数组imageName，获取所选产品的图像名称：iName = imageName[productID];
合并urlBase + image的名称以获取图片的完整网址。这样做：url = urlBase + iName;
将网址加载为包含ID＆＃39;产品图片的src。
使用productID和价格数组获取产品的价格。将产品的价格放在变量iPrice中。请参阅＃4了解如何执行此操作。
设置span＆＃39;价格显示的innerHTML＆＃39;价格。这样做：document.getElementById('...').innerHTML = iPrice;

Answer 1

var imageName = { "1.jpg", "2.jpg", "3.jpg" };
var priceArray = { 200, 100, 489 };
var urlBase = "yourserver/path/where/product/images/are/stored";

document.getElementById('prodSelectTagid').onchange = function () {
    productID = this.value;
    if (isNaN(parseInt(productID))) {
        alert("Not a valid product id");
    } else {
        iName = imageName[productID];
        url = urlBase + iName;
        document.getElementById("prodImg").src = url; //add <img id="prodImg" src="" /> in your html.
        iPrice = priceArray[productID];
        document.getElementById('prodPriceDivTagId').innerHTML = iPrice; //<div id="prodPriceDivTagId" />
    }
};

parseInt用于检查值是否为整数。如果值不是整数，则返回NaN（非数字），如果是整数，则返回值本身。 src用于在HTML中设置<img>标记的来源，如上面代码的注释区域中所指定。

Answer 2

document.getElementById('productID').onchange = function() {
    var productID = parseInt(this.value);
    var iName = imageName[productID];
    var url = urlBase + iName;
    document.getElementById('product image').src = url;
    var iPrice = price[productID];
    document.getElementById('price display').innerHTML = iPrice;
};

onchange事件处理程序练习

2 个答案: