CODEWITHSUNDEEP
javascripthtmlinput
Kristin
Kristin

Reputation: 11

How to change numbers in html after input in JavaScript and HTML?

I am creating an ingredient list where it should be possible to change the number of servings and automatically change the number you need of each ingredient. I've managed to do this somewhat, my only problem now is that it ONLY works if I change the number here: value="4" and not in the input-box that shows on the website (which it is supposed to!).

This is the HTML:

<input type="number" id="serving" oninput="changeServing()" value="4"/>

<ul>
   <p class="ingredient-numbers"></p>
   <li><span class="endre">600</span>g ingredient</li>
   <li><span class="endre">400</span> g ingredient</li>
   <li><span class="endre">2</span>ingredient</li>
   <li><span class="endre">1</span>ingredient</li>
   <li><span class="endre">2</span>ingredient</li>
</ul>

JavaScript:

let saveServing = document.getElementById("serving").value;
let saveArray = document.getElementsByClassName("classname-for-all-list-elements-here");

function changeServing() {
  for (let i = 0; i < saveArray.length; i++) {
    saveArray[i].innerHTML = saveArray[i].innerHTML/4 * saveServing;
  }
}

If I change value in HTML (example: change value="4" to value="5" etc.) it works, the problem is that if I change the number in the input box that shows on the website; it does not work. How can I make it work? Btw, I'm very new to JavaScript so my knowledge is very limited.

PS: The default value should be 4, and change only if it gets input.

Upvotes: 0

Views: 113

Answers (2)

Nick the Community Scientist
Nick the Community Scientist

Reputation: 1801

I took the code that @RosanPaudel wrote prior and wanted to show you that it does work when you change the value if you press the arrow buttons.

Please check it out:

enter image description here

I mentioned, however, make sure those values make sense @Kristi. If these values are OK for your use, then fine by me (I did not quite understand what exactly you expect the algorithm to do in the first place).

Upvotes: 1

Rosan Paudel
Rosan Paudel

Reputation: 170

<input type="number" id="serving" oninput="changeServing()" value="4" />

<body>
  <ul>
    <p class="ingredient-numbers"></p>
    <li><span class="endre">600</span>g ingredient</li>
    <li><span class="endre">400</span> g ingredient</li>
    <li><span class="endre">2</span>ingredient</li>
    <li><span class="endre">1</span>ingredient</li>
    <li><span class="endre">2</span>ingredient</li>
  </ul>
  <script>
    let ingredients = document.querySelectorAll(".endre");

    function changeServing() {
      //   for (let i = 0; i < saveArray.length; i++) {
      //     saveArray[i].innerHTML = (saveArray[i].innerHTML / 4) * saveServing;
      //   }
      for (const ingredient of ingredients) {
        let saveServing = document.getElementById("serving").value;
        ingredient.innerText = (ingredient.innerText / 4) * saveServing;
      }
    }
  </script>
</body>

This works as you intended. I changed the name of the array of ingredients as ingredients and selected using queryselector. I used for of loop since it is very easy to loop in array of objects.

Upvotes: 0

Related Questions