How to apply the same function on paired elements

I have this code where I would like each textbox input will change its corresponding image. The function itself is typical for all partners in the list (txt & img). I’ve searched and read somewhat similar post but it’s just beyond me at this point. How to make the function work without copying it multiple times? Please help and thanks in advance 🙂

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; } 
Professor Asked on October 26, 2020 in Android langue.
Add Comment
1 Answer(s)

Very simply by passing an argument to your function. That’s what arguments are for.

Write one parametric 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 } 

Then call it with a different argument each time :

<input class="box" id="txt01" type="text" value="" onblur="change('01')"/> <input class="box" id="txt02" type="text" value="" onblur="change('02')"/> 
Professor Answered on October 26, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.