Iterate / loop through for a pair of variables that are IDs with conditions in Wordpress

Question

I have Wordpress site with a page of posts. For each post, I want to run javascript. I essentially want to insert HTML in the output div, conditionally for each. What am I doing wrong?

<script>
  var labels = document.querySelectorAll("#uniteLabel"),
  unitOutputs = document.querySelectorAll("#uniteOutput");

  for (var i=0, i < labels.length, i++) { 
    if (labels[i].innerHTML == "En travers") {
      unitOutputs[i].innerHTML = "Stère";
    } else if (labels[i].innerHTML == "A l’unité de produit") {
      unitOutputs[i].innerHTML = "Stère";
    } else if (labels[i].innerHTML == "En bloc") {
      unitOutputs[i].innerHTML = "m3";
    }
  }
</script>

<div class="post">
  <div id="uniteLabel">En travers</div>
  <div id="uniteOutput"></div>
</div>

<div class="post">
  <div id="uniteLabel">A l’unité de produit</div>
  <div id="uniteOutput"></div>
</div>

<div class="post">
  <div id="uniteLabel">En bloc</div>
  <div id="uniteOutput"></div>
</div>

Design.Garden · Accepted Answer · 2020-12-03T14:27:44.230

Answer: Replace the commas in your for loop declaration with semicolons!

i.e., the following:

for (var i=0, i < labels.length, i++) {

should be:

for (var i=0; i < labels.length; i++) {

More info: The comma operator often shows up in minified javascript code, but it is rarely used by us humans. At first glance, the comma operator may appear to work similarly to a semicolon, but in this case they are very different: Your for loop expects 3 input statements, but your use of the comma operator produces just one. See this SO answer for more

var labels = document.querySelectorAll("#uniteLabel"),
unitOutputs = document.querySelectorAll("#uniteOutput");

for (var i=0; i < labels.length; i++) {
  if (labels[i].innerHTML == "En travers") {
    unitOutputs[i].innerHTML = "Stère";
  } else if (labels[i].innerHTML == "A l’unité de produit") {
    unitOutputs[i].innerHTML = "Stère";
  } else if (labels[i].innerHTML == "En bloc") {
    unitOutputs[i].innerHTML = "m3";
  }
}

<div class="post">
  <div id="uniteLabel">En travers</div>
  <div id="uniteOutput"></div>
</div>

<div class="post">
  <div id="uniteLabel">A l’unité de produit</div>
  <div id="uniteOutput"></div>
</div>

<div class="post">
  <div id="uniteLabel">En bloc</div>
  <div id="uniteOutput"></div>
</div>

Koala Yeung · Answer 2 · 2020-12-03T14:38:02.587

First, you should not use "id" multiple times. According to specification, "id" is supposed to be unique in an HTML. You could get strange behaviours from browsers. The simplest fix is to change them all into "class".

Another danger is that you could have something else using the "post" as class. If there is be another element wraping this .post list, you should use it to refine your selector. For example,

<div class="posts">
  <div class="post">
    <div class="uniteLabel">En travers</div>
    <div class="uniteOutput"></div>
  </div>
  
  <div class="post">
    <div class="uniteLabel">A l’unité de produit</div>
    <div class="uniteOutput"></div>
  </div>
  
  <div class="post">
    <div class="uniteLabel">En bloc</div>
    <div class="uniteOutput"></div>
  </div>
</div>

Then you can loop through the posts:

var posts = document.querySelectorAll(".posts .post");

for (let post of posts) {
  let uniteLabel = post.querySelector(".uniteLabel");
  let uniteOutput = post.querySelector(".uniteOutput");
  switch (uniteLabel.innerHTML || null) {
    case "En travers":
    case "A l’unité de produit":
      if (uniteOutput) { uniteOutput.innerHTML = "Stère"; }
      break;
    case "En bloc":
      if (uniteOutput) { uniteOutput.innerHTML = "m3"; }
      break;
  }
}

<div class="posts">
  <div class="post">
    <div class="uniteLabel">En travers</div>
    <div class="uniteOutput"></div>
  </div>
  
  <div class="post">
    <div class="uniteLabel">A l’unité de produit</div>
    <div class="uniteOutput"></div>
  </div>
  
  <div class="post">
    <div class="uniteLabel">En bloc</div>
    <div class="uniteOutput"></div>
  </div>
</div>

The "unique id" specification is not enforced by most browsers and is rarely followed when dealing with Wordpress output. You fixed the bug by changing the for loop signature. — Design.Garden, Dec 03 '20 at 14:33
Although not enforced, some javascript APIs expects the unique id specification. So duplicated id can cause other issue in the future and worth fixing right the way. (e.g. You can only get 1 value from getElementById). — Koala Yeung, Dec 03 '20 at 14:40
I wasn't giving advice -- I stated a fact and clarified that the "unique id" specification has nothing to do with the solution here. — Design.Garden, Dec 03 '20 at 14:47
@mattavatar: True. And I never stated that the change is needed because it fixes the code. — Koala Yeung, Dec 03 '20 at 14:49

Iterate / loop through for a pair of variables that are IDs with conditions in Wordpress

2 Answers2