How to change list text with dropdown selection using Javascript?-CodePudding

I am pretty new to Javascript and I am trying to update the HTML list below to display certain values depending on the dropdown value I select. However, when I change the dropdown options, the list is not updating with the correct dynamic values. I tried checking the console log but no errors are displaying either.

Any tips on how I can get this working? I would prefer to stick with using vanilla Javascript for now since I am still trying to learn it.

let sel = document.getElementById("num-of-servings");

function servingSize(sel) {
  selValue = sel.options[sel.selectedIndex].value;
  selText = sel.options[sel.selectedIndex].text;

  if (sel === "first") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "second") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "third") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "fourth") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  }
}

<select name="1" id="num-of-servings" onchange="servingSize(this)">
  <option value="first">4</option>
  <option value="second">6</option>
  <option value="third">8</option>
  <option value="fourth">12</option>
</select>
<ul>
  <li id="first-ingredient">1 pound of beef</li>
  <li id="second-ingredient">1 teaspoon of salt</li>
  <li id="third-ingredient">1 teaspoon of pepper</li>
</ul>

CodePudding user response：

The param of servingSize consists of a bunch of other properties including value.

If you want to get value, you should get it from e.value.

In another concern, text is incorrect but innerText which will be 4, 6, 8, 12.

Side note values from fields/HTML elements are strings by default, so you need to parse them to numbers for number operations.

let sel = document.getElementById("num-of-servings");

function servingSize(e) {
  const sel = e.value;
  const selText = parseInt(e.innerText);

  if (sel === "first") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "second") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "third") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  } else if (sel === "fourth") {
    document.getElementById("first-ingredient").innerHTML = (1 * selText)   " pounds of beef";
    document.getElementById("second-ingredient").innerHTML = (1 * selText)   " teaspoons of salt";
    document.getElementById("third-ingredient").innerHTML = (1 * selText)   " teaspoons of pepper";
  }
}

<select name="1" id="num-of-servings" onchange="servingSize(this)">
  <option value="first">4</option>
  <option value="second">6</option>
  <option value="third">8</option>
  <option value="fourth">12</option>
</select>
<ul>
  <li id="first-ingredient">1 pound of beef</li>
  <li id="second-ingredient">1 teaspoon of salt</li>
  <li id="third-ingredient">1 teaspoon of pepper</li>
</ul>

CodePudding user response：

Your code was not working because in if condition it looks like you are checking the DOM element itself. If you replace sel in if conditions by selValue it will work as you expected.

It can be done without if else conditions. You just have to get the text of selected option and display the results.

let sel = document.getElementById("num-of-servings");

function servingSize(sel) {
  let firstIngredient = document.getElementById("first-ingredient");
  let secondIngredient = document.getElementById("second-ingredient");
  let thirdIngredient = document.getElementById("third-ingredient");

  const selText = sel.options[sel.selectedIndex].text;
  
  firstIngredient.innerText = `${selText} pounds of beef`;
  secondIngredient.innerText = `${selText} teaspoons of salt`;
  thirdIngredient.innerText = `${selText} teaspoons of pepper`;
}

<select name="1" id="num-of-servings" onchange="servingSize(this)">
  <option value="first">4</option>
  <option value="second">6</option>
  <option value="third">8</option>
  <option value="fourth">12</option>
</select>
<ul>
  <li id="first-ingredient">1 pound of beef</li>
  <li id="second-ingredient">1 teaspoon of salt</li>
  <li id="third-ingredient">1 teaspoon of pepper</li>
</ul>