Why do these codes clash? And why does this code not work?

[NiTride]

Hi all,

I am having difficulties getting Javascript codes to function correctly. I have a code that works with no issues, shown below. It is able to return the currently selected value of a dropdown menu, and have this update whenever that option is changed. Please see this code below for reference.

<div class="currentselectedsizevalue" id=current-selected-variants-size-value>
<script>
var e = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
function ringsizeonChange1() {
  var e = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
  var text = e.options[e.selectedIndex].text;
  document.querySelector(".currentselectedsizevalue").innerHTML = text;
}
e.onchange = ringsizeonChange1;
ringsizeonChange1();
</script> 
</div>  

For some reason however, when I try and use this code again somewhere else, using unique function names, etc, for some reason it causes the other code to stop working. So if I have this code added to my page below, it causes the above code to stop working for some reason.

<div class="selected-ring-size-dimensions-content" id=variant-design-shape-dimensions-content>
                          <script>
                            var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
function ringsizeonChange2() {
  var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
  var text2 = e2.options[e2.selectedIndex].text;
  document.querySelector(".currentselectedsizevalue").innerHTML = text2;
}
e2.onchange = ringsizeonChange2;
ringsizeonChange2();
</script> 
</div>  

These codes are completely different, they shouldn't be clashing with eachother? Please let me know why these codes clash. Also let me know why the below code I developed doesn't work either. For some reason the conditional statements don't work. I've tried with and without commas, colons, etc in the condition but doesn't fix the issue.

 <div class="selected-ring-size-dimensions-content" id=variant-design-shape-dimensions-content>
   <script>
var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
function ringsizeonChange2() {
  var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
  var text2 = e2.options[e2.selectedIndex].text;
  if (text2 == 6.0 / 10) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions6 }};
}
 else if (text2 == 7.0 / 54.35) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions7 }};
}
 else if (text2 == 8.0 / 57.18) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions8 }};
}
 else if (text2 == 9.0 / 59.69) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions9 }};
}
 else if (text2 == 10.0 / 62.20) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions10 }};
}
 else if (text2 == 11.0 / 64.72) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions11 }};
}
 else if (text2 == 12.0 / 67.23) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions12 }};
}
 else if (text2 == 13.0 / 69.74) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions13 }};
}
 else (text2 == 14.0 / 72.26) {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions14 }};
}
}
e2.onchange = ringsizeonChange2;
ringsizeonChange2();
</script>             </div> 

The code is just meant to show the dimensions for the selected ring size on the product page. Thank you for all the support in advance. I really appreciate the help.

Kind Regards,

Nicolas

[tobebuilds · Accepted solution]

You are overwriting the `onchange` listener. Instead, call `e.addEventListener('change', ...)`.

Best,

Tobe

[NiTride]

Thanks, that fixed the issue. I really appreciate the help.

Only issue now is getting my conditional statements to work. If my output is string, how would I go about comparing in a conditional statement. Is there a way to compare a string with another string?

[NiTride]

Hi Tobe,

I really apologise for asking for more help, but would you happen to know how I could get my conditional statements to work. I beleive the variable "text2" is a string. I've tried changing my statements to the below format and it still doesn't seem to work for some reason?

 if (text2.equals("6.0 / 10")){
}

Is there something about Javascript coding I am doing incorrectly, or am unfamiliar with. I can't seem to see why it isn't working? Thanks again for the help

[tobebuilds]

I heavily recommend making use of your browser's developer tools console. You can go line by line and inspect the types of values.

Based on your code, text2 is likely a string. However, JS strings do not have an ".equals" method. You could try:

if (text2 === "6.0 / 10")

I also highly recommend using the Mozilla Developer Network guides on JavaScript to learn the fundamentals:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

[NiTride]

I apologise for my illiteracy in Javascript coding. I should learn the fundamentals. I normally try to avoid Javascript coding as it is really difficult to debug and get working, not to mention difficult to learn. Tried the code and it still isn't working. I think I tried that in the past. Just realised the previous source I found was for "Java" and not Javascript. This is what I have for the code. I have tried having the liquid variables in single quotes and without them as well.

var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
function ringsizeonChange2() {
  var e2 = document.getElementById("LineItemInput-template--18481807851739__main-product-line_item_property_d9x89Q");
  var text2 = e2.options[e2.selectedIndex].text;

  if (text2==="6.0 / 10") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions6 }}';
}
 else if (text2==="7.0 / 54.35") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions7 }}';
}
 else if (text2==="8.0 / 57.18") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions8 }}';
}
 else if (text2==="9.0 / 59.69") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions9 }}';
}
 else if (text2==="10.0 / 62.20") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions10 }}';
}
 else if (text2==="11.0 / 64.72") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions11 }}';
}
 else if (text2==="12.0 / 67.23") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions12 }}';
}
 else if (text2==="13.0 / 69.74") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions13 }}';
}
 else if (text2==="14.0 / 72.26") {
  document.querySelector(".selected-ring-size-dimensions-content").innerHTML = '{{ product.metafields.custom.dimensions14 }}';
}
  else{  
  }
}
e2.addEventListener('change', ringsizeonChange2);
ringsizeonChange2();

I'm assuming the problem isn't local, and is somehow elsewhere, as I always seem to have code clashing in other areas somehow. The original codes works, its just when I add the conditional statements it doesn't. Wouldn't that mean the conditional statements are the only thing causing the issue?

The "text2" value in the code is an "option, value" taken from a select element. This select element is a dropdown option on my product page. Would this be a string, and if it is, why would this not be working?

[Korede-Agency]

Hello. @NiTride 

ID conflicts, event listeners affecting the same elements, and possibly a mismatch in the conditional statements type, may be the root cause of the issues you're experiencing.

1. In both scripts, the onchange  event listeners is being assigned to document.getElementById("LineItemInput-template-..."), therefore one script may be overriding the other since they both target similar elements.

Make sure the IDs are unique or attach event listeners correctly.

2.  document.querySelector(".currentselectedsizevalue"), are being used in both scripts, which might be the reason for the conflict when one script tries to update it while another is already modifying it.

You can use a separate class name or log text and text 2 in the console (console.log(text, text2)) to debug.

3. The conditional statement check against numbers (e.g., text2 == 6.0), while  text2 is likely a string.

Try converting  text2 to a number before comparisons;

var text2 = parseFloat(e2.options[e2.selectedIndex].text);

4. Curly braces contained in the innerHTML assignment: document.querySelector(".selected-ring-size-dimensions-content").innerHTML = {{ product.metafields.custom.dimensions6 }}; makes {} a Liquid syntax. However, JavaScript expects actual variable data.

Try assigning  product.metafields.custom.dimensions6 as a variable first (before JavaScript executes).

Lastly, here's a possible fix as well for the last script:

<script>
var e2 = document.getElementById("LineItemInput-template-18481808751379__main-product-line_item_property_dx89kQ");

function ringsizeChange2() {
var text2 = parseFloat(e2.options[e2.selectedIndex].text); // Convert to number

var dimensionsMap = {
6.0: product.metafields.custom.dimensions6,
7.0: product.metafields.custom.dimensions7,
8.0: product.metafields.custom.dimensions8,
9.0: product.metafields.custom.dimensions9,
10.0: product.metafields.custom.dimensions10,
11.0: product.metafields.custom.dimensions11,
13.0: product.metafields.custom.dimensions13,
14.0: product.metafields.custom.dimensions14
};

// Update the element only if a valid size exists
if (dimensionsMap[text2]) {
document.querySelector(".selected-ring-size-dimensions-content").innerHTML = dimensionsMap[text2];
}
}

e2.onchange = ringsizeChange2;
ringsizeChange2(); // Run on page load to set initial value
</script>

[NiTride]

Hi Korede,

I tried your code and it doesn't seem to work for some reason. I also tried a different strategy I found for comparing strings being like below and it still isn't working either. 

 if (text2.equals("6.0 / 10"))

I guess I got to look into it more to try and figure out what is going wrong. Thanks anyway for the suggestion.