Javascript assign onclick event to multiple images not assigning correct values

Question

I have a group of img elements, each with id set to "name,id,size", where name, id, and size are set elsewhere. I'm trying to dynamically remove and assign their onclick functionality. Removal of onclick works just fine. However, when I go to add onclicks back, it all falls apart. I've attached the relevant code below. This code runs in a for loop that loops over all elements and assigns a new onclick function.

What's happening is very odd. For some reason, the "productInfo[1]" argument to each onclick function is being set to the same value, and specifically it's the last product in the lists' value. I suspect but cannot prove that the way I'm setting up my onclicks is wrong, but I need to add parameters and this is the only way I've seen to do it. Suggestions on that would be welcome, but also a suggestion to fix the issue.

The function that modifies this behaviour:

function imageGrayChange(outIn)
{
  //get the div first
  var i = 0;
  var elem = document.getElementById("imageSlider" + i.toString());
  var grayString = 'margin:auto;max-width: 20vw;filter:opacity(40%);';
  var noGrayString = 'margin:auto;max-width: 20vw;';
  while(elem){ 
    var imgDiv = elem.querySelectorAll('img');
    if(outIn == 1)
    {
      if(imgDiv[0].id.includes("small") && remainingSpace < 1)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
      else if(imgDiv[0].id.includes("medium") && remainingSpace < 2)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
      else if(imgDiv[0].id.includes("large") && remainingSpace < 3)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
    }
    else
    {
      var productInfo = imgDiv[0].id.split(',');
      if(imgDiv[0].id.includes("inStock"))
      {
        if(imgDiv[0].id.includes("medium") && remainingSpace >= 2)
        {
          console.log(productInfo[0] + " " + productInfo[1]);
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=noGrayString;
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'medium')};
        }
        else if(imgDiv[0].id.includes("large") && remainingSpace >= 3)
        {
          console.log(productInfo[0] + " " + productInfo[1]);
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=noGrayString;
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'large')};
        }
        else if(imgDiv[0].id.includes("small"))
        {
          console.log(productInfo[0] + " " + productInfo[1]);
            document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'small')};
        }
      }
    }
    i+=1;
    elem = document.getElementById("imageSlider" + i.toString());
 }

}

The html that sets each image initially:

<img class="mySlides" src="{{ image | img_url: 'master' }}" style="margin:auto;max-width: 20vw;{{greyedOut}}" onclick="
    addToCart({{product.variants[0].id}},'{{sizeString}}');
    return false" id="{{imageID}},{{inStock}}">

the id field contains "productName,id,size,inStock"

Show the markup so we can see what is in productInfo. If you need to change the URLs that's fine. I don't see the for loop either. Show all of the relevant code, please. — mjw, Jun 11 '18 at 19:03
updated. There is a lot of code, which is why I just posted a snippet — Michael Stachowsky, Jun 11 '18 at 19:06
For the record, the obvious answer is to use input with image types. However, I am adding these images to a slider using the slick library, which I believe requires images, not inputs. I could be wrong, though — Michael Stachowsky, Jun 11 '18 at 19:06

Javascript assign onclick event to multiple images not assigning correct values

0 Answers0