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

Question

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.

You are setting saveServing when page loads only, before user can provide their input. Get the current value inside the function — charlietfl
– charlietfl, Commented Feb 1, 2022 at 13:14
I am also new to javascript. I think you should reassign the value to the javascript in some way. Because once scripts loadsup its finished. You have to define onChange event listener. — Rosan Paudel
– Rosan Paudel, Commented Feb 1, 2022 at 13:20
I am getting it. If I could see full code I would be able to give the solution. — Rosan Paudel
– Rosan Paudel, Commented Feb 1, 2022 at 13:23
@RosanPaudel The full html code is a bit difficult to show as it's not in English, but I tried including the list so you could see what else I did to try make the code work. — Kristin
– Kristin, Commented Feb 1, 2022 at 13:31
@charlietfl Thanks for the suggestion, I tried putting saveServing within the function but that only made it put out weird and incorrect numbers... — Kristin
– Kristin, Commented Feb 1, 2022 at 13:33

Nick the Community Scientist · Accepted Answer · 2022-02-01 18:15:49Z

1

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:

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).

edited Feb 1, 2022 at 18:15

answered Feb 1, 2022 at 16:21

Nick the Community Scientist

1,8711 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rosan Paudel Over a year ago

I just used the concept you described and formula of the code to populate the data.

Nick the Community Scientist Over a year ago

@RosanPaudel I was actually trying to reference Kristy's original algorithm in my answer. Let me clarify real quick. Sorry for the misunderstanding, your contribution was great, don't worry.

Rosan Paudel Over a year ago

No worries. I didn't meant in that sense. You clearify more clearly.

Rosan Paudel · Accepted Answer · 2022-02-01 14:16:35Z

0

<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.

answered Feb 1, 2022 at 14:16

Rosan Paudel

1701 gold badge3 silver badges15 bronze badges

3 Comments

Kristin Over a year ago

Thank you so much for this, it makes more sense now! The only thing I've noticed now however is that it doesn't seem to work if you change the input (in the input box) multiple times, as if the numbers accumulate? This does however solve part of the problem, so this already helps a lot!

Nick the Community Scientist Over a year ago

Hey @Kristin have you tried using the input box arrows for up and down instead of typing the value in the box? I think it works if you do that. Also, are the numbers really what you are looking for? When I click the button many times, I get some crazy values.

Rosan Paudel Over a year ago

Yep I am also beginner and may be we can fix with some validation.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related