onchangeイベントハンドラーの演習

Question

私は、イベントハンドラーとアレイを交換するのに慣れてきています。私は何を求めているのか、大きな問題を抱えています。ここに私のコードです：

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

ここには指示があります。

1. 選択リストのonchangeイベントを処理します。 ID 'のproductID'

2. 選択果実ののproductIDをこのように取得します：productID = this.value;

3. 使用parseInt()のproductID値が数値であることを確認します。

4. は、配列imagenameのをこのように参照するためのproductIDを使用して、選択した製品のイメージ名を取得します。iName = imageName[productID];

5. イメージに完全なURLを取得するにはurlBase +イメージの名前を結合します。このようにしてください：url = urlBase + iName;

6. URLをID「製品画像」のsrcとしてロードします。

7. 製品IDと価格配列を使用して製品の価格を入手してください。変数iPriceに製品の価格を入力します。これを行う方法については、＃4を参照してください。

8. スパン「価格表示」のinnerHTMLを価格に設定します。このようにそれを実行します。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; 
};