Custom Event Listener not working on product varient buttons

Design help Custom code
1

Hi,

I’ve been trying to add some custom events using javascript whereby text updates depending on if SKU1 or SKU2 of a product is selected. I’m using the Webflow E-commerce and for some reason if I add a .addEventListener(“click”, function) it seemingly doesn’t get added and the function gets run on load. Is there some kind of event blocker on variant buttons? Or am I missing something?

The code is a bit of a mess as I have been trying multiple things but hopefully it’s understandable.

//identify variant buttons using a custom data field
var options = document.querySelectorAll('[data-size="option"]');
//turn the nodes into an array
var optionArray = Array.from(options);
//create empty arrays to store button data
var optionArrayText = [];
var optionArrayName = [];


// Populate arrays with button data
var x = optionArray.map((option, index) => {
  optionArrayText.push(optionArray[index].innerText);
  optionArrayName.push(optionArrayText[index].split(" ")[0]);
  
  // on first run only update the product-sku-info div to the first piece of data in the optionArrayText array
  if (index == 0){
    document.getElementById("product-sku-info").innerHTML = optionArrayText[0];
  }

  //change the text inside the variant button
  optionArray[index].innerText = optionArrayName[index];

});

//Everything works up to here

// NOT WORKING - add event listener to fire on click and run function
optionArray[0].addEventListener("click", optionClick(0));
optionArray[1].addEventListener("click", optionClick(1));

// NOT WORKING - add event listener to fire on click and run function
options[0].addEventListener("click", optionClick(0));
options[1].addEventListener("click", optionClick(1));

// NOT WORKING - add event listener to fire on click and run function
options[0].onclick = optionClick(0);
options[1].onclick = optionClick(1);

Any ideas what might be going wrong?
The page where i’m trying to make this work is the Product Template - Blyss
And i’m using the before </body> tag custom code block in the page settings.

Thanks,
Olivier

Here is my site Read-Only: LINK