Dynamically Create Variable/Method Names

Question

So here is possibly a very simple question that I am trying to figure out. I find myself constantly running into. Take the following block of JavaScript/jQuery:

 $('#image1Path').change(change => {
      if(this.selectedImage1 == "None"){
        $("#image1Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image1Display").attr("src", "../../assets/images/product-images/" + this.selectedImage1);
      }
    });

    $('#image2Path').change(change => {
      if(this.selectedImage2 == "None"){
        $("#image2Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image2Display").attr("src", "../../assets/images/product-images/" + this.selectedImage2);
      }
    });

    $('#image3Path').change(change => {
      if(this.selectedImage3 == "None"){
        $("#image3Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image3Display").attr("src", "../../assets/images/product-images/" + this.selectedImage3);
      }
    });

    $('#image4Path').change(change => {
      if(this.selectedImage4 == "None"){
        $("#image4Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image4Display").attr("src", "../../assets/images/product-images/" + this.selectedImage4);
      }
    });

    $('#image5Path').change(change => {
      if(this.selectedImage5 == "None"){
        $("#image5Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image5Display").attr("src", "../../assets/images/product-images/" + this.selectedImage5);
      }
    });

    $('#image6Path').change(change => {
      if(this.selectedImage6 == "None"){
        $("#image6Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image6Display").attr("src", "../../assets/images/product-images/" + this.selectedImage6);
      }
    });

This is obviously super repetitive and unnecessary. It would of course make sense to create some kind of loop to handle it instead. Something that looks like this:

for(i = 1; i <= 6; i++){
    $("#image" + i + "Path").change(change => {
       if(this.*selectedImage + i* == "None"){
          $("#image" + i + "Display").attr("src", "../../assets/images/product-images/" + *this.selectedImage + i*);
       } else {
          $("#image" + i + "Display").attr("src", "../../assets/images/NoImageSelected.png");
       }
    }
}

I know this doesn't work. The problem is of course that you can't concatenate the i variable name and the selectedImage variable name, in some manner like what is seen above between the asterisks. I'm kind of curious if there is some way around this, or if there actually is a way to dynamically create variable/method names. Thanks.

Answer 1

You can use single change handler with attribute begins with selector as parameter to jQuery(), get digit character from change.target.id, use bracket notation, string concatenation or template literal

 const path = "../../assets/images/";
 $("[id^=image]").change(change => {
   let n = change.target.id.replace(/\D/g, "");
   let curr = $(`#${change.target.id.replace(/Path/, "Display")}`);
   let selected = this[`selectedImage${n}`];
   curr.attr("src", selected == "None" 
     ? `${path}/NoImageSelected.png`
     : `${path}/product-images/${selected}`);
 });

Answer 2

We can access variable like object[variablename]

function bindEvent(i){
          $("#image" + i + "Path").change(change => {
               if(this[selectedImage + i] == "None"){
                  $("#image" + i + "Display").attr("src", "../../assets/images/product-images/" + this[selectedImage + i]);
               } else {
                  $("#image" + i + "Display").attr("src", "../../assets/images/NoImageSelected.png");
               }
            }
        }

    for(i = 1; i <= 6; i++){
      bindEvent(i);
    }