如何在配對元素上應用相同的 function

Question

我有這段代碼，我希望每個文本框輸入都會更改其相應的圖像。 function 本身對於列表中的所有合作伙伴都是典型的（txt 和 img）。 我已經搜索並閱讀了一些類似的帖子，但此時它超出了我的范圍。 如何讓 function 工作而不復制多次？ 請提前幫助和感謝:)

HTML

<div id="sideleft">
<div class="pict" id="img01"></div>
<div class="pict" id="img02"></div>
<div class="pict" id="img03"></div>
<div class="pict" id="img04"></div>
<div class="pict" id="img05"></div>
<div class="pict" id="img06"></div>
<div class="pict" id="img07"></div>
<div class="pict" id="img08"></div>
<div class="pict" id="img09"></div>
</div>

<div id="sideright">
<input class="box" id="txt01" type="text" value="" onblur="change01()"/>
<input class="box" id="txt02" type="text" value="" onblur="change02()"/>
<input class="box" id="txt03" type="text" value="" onblur="change()"/>
<input class="box" id="txt04" type="text" value="" onblur="change()"/>
<input class="box" id="txt05" type="text" value="" onblur="change()"/>
<input class="box" id="txt06" type="text" value="" onblur="change()"/>
<input class="box" id="txt07" type="text" value="" onblur="change()"/>
<input class="box" id="txt08" type="text" value="" onblur="change()"/>
<input class="box" id="txt09" type="text" value="" onblur="change()"/>
</div>

function change01() {
var image = "";
var answers = document.getElementById("txt01").value;
switch(answers) {
case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>'; break;
} document.getElementById("img01").innerHTML = image;
}

function change02() {
var image = "";
var answers = document.getElementById("txt02").value;
switch(answers) {
case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>'; break;
} document.getElementById("img02").innerHTML = image;
}

CSS

#sideright, #sideleft{
  float:left;
  width:180px;
}

#sideleft div{
  float:left;
  border:1px solid red;
  width:55px;
  height:55px;
}

Answer 1

非常簡單，只需將參數傳遞給您的 function。 這就是 arguments 的用途。

寫一個參數function：

function change( num ) { // <-- here num=='01' or '02'
    var image = "";
    var answers = document.getElementById("txt" + num ).value; // txt01, txt02
    switch(answers) {
         case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
         case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
         case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
         case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
         default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>';                            break;
    } document.getElementById("img" + num ).innerHTML = image; // img01, img02
}

然后每次用不同的參數調用它：

<input class="box" id="txt01" type="text" value="" onblur="change('01')"/>
<input class="box" id="txt02" type="text" value="" onblur="change('02')"/>