Dynamically Create Variable/Method Names

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.

Answers 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}`);
     });
    

Related Articles