How to prevent using multiple else if statement in JS?

Question

I have this script that walks through my page and looks for any tooltip to fill with the right ingredient. But I would like to know if there is a way to optimize it as it goes like this:

var indiv = document.getElementById("ingredients");
var s = indiv.getElementsByTagName("SPAN"); 
var i;
    
for (i = 0; i < s.length; i++) {
  var ss = s[i].parentElement.textContent;
      
  var ingredient1 = ss.includes("test1");
  var ingredient2 = ss.includes("test2");
 
  if (ingredient1) {
    s[i].textContent = "this is the number 1 ingredient";
  } else if (ingredient2) {
    s[i].textContent = "this is the number 2 ingredien";
  } else {
    s[i].textContent = "unknown ingredient!";
  }
}

And it keeps going with else if (ingredient 3), else if (ingredient 4), etc. I know that in Python there is a dictionary to use, but I can't find a good way to do that in JS.

Here is a snippet of my HTML if that helps:

<div id="ingredients">
    <div class="tooltiping bio" style="color: black;">Citrus Limon Fruit Water,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping bio" style="color: black;"> Hamamelis Virginiana Water,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    <div class="tooltiping bio" style="color: black;"> Glycerin,&nbsp;
        <span class="tooltiptext">unknown</span>
    </div>
    </div>

So the purpose of the script is to change the unknown value in <span> to the right value.

Answer 1

In other words: A set of strings that indicate specific ingredients. If those strings are stored in a simple array in an order related to their so-called ingredient nr then you could simply use the index+1 after identifying which ingredient string is included in the value of the string variable called ss.

So first let's create the array we mentioned earlier:

const ingredientStrList = ['test1', 'test2', 'test3', 'test4'];

Now let's create a dummy ss variable with an possible and testable value:

const ss = '12test12';

Now we need a way to iterate over all strings of the array and check if they are included in the string ss and if so return the wanted index of that ingredient string that matched.

For that, we can use findIndex which does the iteration for us and also returns the index if a match was found. But we must tell findIndex which function it should use to check the ingredient strings against.

Of course we use ss.includes for that needed checking function, ̶b̶u̶t̶ ̶t̶h̶e̶r̶e̶ ̶i̶s̶ ̶a̶ ̶p̶r̶o̶b̶l̶e̶m̶ ̶w̶i̶t̶h̶ ̶c̶a̶l̶l̶b̶a̶c̶k̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶s̶ ̶u̶s̶i̶n̶g̶ ̶t̶h̶e̶ ̶[̶t̶h̶i̶s̶]̶[̶2̶]̶ ̶k̶e̶y̶w̶o̶r̶d̶ ̶i̶n̶t̶e̶r̶n̶a̶l̶l̶y̶.̶ ̶S̶o̶ ̶w̶e̶ ̶m̶u̶s̶t̶ ̶g̶i̶v̶e̶ ̶i̶t̶ ̶t̶h̶e̶ ̶s̶a̶m̶e̶ ̶v̶a̶l̶u̶e̶ ̶f̶o̶r̶ ̶[̶t̶h̶i̶s̶]̶[̶2̶]̶ ̶n̶o̶ ̶m̶a̶t̶t̶e̶r̶ ̶h̶o̶w̶ ̶t̶h̶e̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶i̶s̶ ̶b̶e̶i̶n̶g̶ ̶c̶a̶l̶l̶e̶d̶.̶ ̶F̶o̶r̶ ̶t̶h̶a̶t̶ ̶w̶e̶ ̶u̶s̶e̶ ̶t̶h̶e̶ ̶[̶b̶i̶n̶d̶]̶[̶3̶]̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶.̶

So by using all of those previously mentioned things together we can come up with a function like this:

function getIngredientNr(ingredientStrList, text){
  const nr = ingredientStrList.findIndex(e=>text.includes(e))+1;
  return nr || undefined; //returns undefined if no ingredient str matched
}

And here is a test for you to run to convince yourself that it works as intended:

function getIngredientNr(ingredientStrList, text){
  const nr = ingredientStrList.findIndex(e=>text.includes(e))+1;
  return nr || undefined;
}
const ingredients = [
  'Citrus Limon Fruit Water',
   'Hamamelis Virginiana Water',
   'Glycerin'
];
document.querySelectorAll('#ingredients > div > span').forEach(s=>{
  const ss = s.parentNode.innerText;
  const ingNr = getIngredientNr(ingredients, ss);
  s.innerText = ingNr 
    ? `this is the number ${ingNr} ingredient` 
    : 'unknown ingredient!';
});

<div id="ingredients">
  <div class="tooltiping bio" style="color: black;">Citrus Limon Fruit Water,&nbsp;
    <span class="tooltiptext">unknown</span>
  </div>
  <div class="tooltiping bio" style="color: black;"> Hamamelis Virginiana Water,&nbsp;
    <span class="tooltiptext">unknown</span>
  </div>
  <div class="tooltiping bio" style="color: black;"> Glycerin,&nbsp;
    <span class="tooltiptext">unknown</span>
  </div>
</div>

Answer 2

const ingredients = [ingredient1, ingredient2, ingredient3, ingredient4];
let index = 0;
let unknown = false;
for (const ingredient of ingredients) {
  if (ingredient){ console.log(`this is ingredient number ${index + 1}`); unknown = true; break; }
  index++;
}
if (unknown) console.log('unknown');

Using for loops and break.