ページに3つのプルダウンメニューがあります。ユーザーが選択すると、画像とキャプションが変更されます。 以下は動作するonLoad関数の一部です。しかし、私はこれら3つの本質的に同じ機能を組み合わせるソリューションを探しています。アレイonchange関数を簡略化する方法
変数を配列インデックスとして配置する方法を試しました。 myChoice [x] .on for（array in x）などと交換しますが、動作させることはできません。
myChoiceはSelect要素の配列で、そこから画像とキャプションに必要な値が抽出されます。 myThumbはイメージ要素の配列です。 myDescはキャプション用のスパン要素配列です。
私は本当に良い入力を感謝します。ありがとうございました！
myChoice [0] .onchange =関数（）
{
jpgfile = this.value。
filechar = jpgfile.length-3;
shortfile = jpgfile.substr（filechar、3）;
myThumb [0] .src = bp + 'truffle' +ショートファイル+ '。jpg';
captext = shortfile.substr（2,1）;
myDesc [0] .innerHTML = caption [captext];
}
myChoice [1] .onchange =関数（）
{
jpgfile = this.value。
filechar = jpgfile.length-3;
shortfile = jpgfile.substr（filechar、3）;
myThumb [1] .src = bp + 'truffle' +ショートファイル+ '。jpg';
captext = shortfile.substr（2,1）;
myDesc [1] .innerHTML = caption [captext];
}
myChoice [2] .onchange =関数（）{
jpgfile = this.value。
filechar = jpgfile.length-3;
shortfile = jpgfile.substr（filechar、3）;
myThumb [2] .src = bp + 'truffle' +ショートファイル+ '。jpg';
captext = shortfile.substr（2,1）;
myDesc [2] .innerHTML = caption [captext]; }
提案機能ここに行く
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.choicePic {
display:block;
}
h1 {
font-family:arial, Verdana, tahoma;
font-size:17pt;
text-align:center;
display:block;
}
#caption0, #caption1, #caption2 {
font-family:arial, Verdana, tahoma;
font-size:7pt;
text-align:left;
display:block;
}
</style>
<script type="text/javascript">
function setPicCap() {
var caption=['Select your chocolate',
'Flavors from India: nutmeg and subtle spices, in milk chocolate, dusted with cinnamon. ',
'Caribbean flavors of rum and butter mingle in a creamy center, dipped in dark chocolate. ',
'Dark chocolate truffle center, dipped in dark chocolate with white chocolate stripes. ',
]; // This will be your images description
var bp='images/store/', //base url of your images
imgnum=3; //Number of your images. This should match on your comboboxes options.
var myThumb=new Array(3), myDesc=new Array(3), myChoice=new Array(3);
for (i=0; i<imgnum; i++) {
numChoice=i.toString();
imgChoice="thumb"+numChoice;
capChoice="caption"+numChoice;
selectChoice="selection"+numChoice;
imgChoice=document.getElementById(imgChoice); //Image element. Use .src to view specific.
myThumb[i]=imgChoice;
capChoice=document.getElementById(capChoice); //Span element. Place holder. No value.
myDesc[i]=capChoice;
selectChoice=document.getElementById(selectChoice); //Select element. Use innerHTML to view specific.
myChoice[i]=selectChoice;
}
function updateThumb(index, jpgfile){
shortfile = jpgfile.substr(jpgfile.length - 3,3);
myThumb[index].src = bp + 'truffle' + shortfile + '.jpg';
captext = shortfile.substr(2,1);
myDesc[index].innerHTML = caption[captext];
}
for(var j = 0; j < myChoice.length; j++){
var idx = j;
myChoice.onchange = function(){
updateThumb(idx, this.value);
}
}
}
</script>
</head>
<body onLoad="setPicCap()">
<center>
<h1>Build Your Computer Test Script</h1>
</center>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.png" alt="Mukilteo Choclate Truffle" border="0" id="thumb0" class="choicePic"></td>
<td><select id="selection0" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square0: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square0: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square0: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption0"></span></td>
</tr>
</table>
<br>
<br>
<br>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.gif" alt="Mukilteo Choclate Truffle" border="0" id="thumb1" class="choicePic"></td>
<td><select id="selection1" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square1: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square1: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square1: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption1"></span></td>
</tr>
</table>
<br>
<br>
<br>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.jpg" alt="Mukilteo Choclate Truffle" border="0" id="thumb2" class="choicePic"></td>
<td><select id="selection2" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square2: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square2: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square2: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption2"></span></td>
</tr>
</table>
</body>
</html>
は、私たちの迅速な対応、スクラムマイスターいただきありがとうございます。それは非常に有望だったが、うまくいかなかった。どうしてか分かりません。私はonLoadから呼び出すのではなく、配列インデックスを渡す各Selectタグでonchangeを行うことを考えています。私は元の質問に全コードを加えました。 – tkl