Javascript: how to get calculate multiple input values in loop using javascript?

Question

I am trying to calculate the value of some input field in my Django template using javascript (onkeyup=(), the form is in a loop e.g {% for p in prediction %} {% endfor %}.

I have this simple line to grab the input values (NOTE: They are in a loop)

   let stake_amount_input = document.querySelector("#amount").value
   let shares_amount_input = document.querySelector("#shares").value

Based on the fact that I have all these functions in a Django loop, am I not supposed to get all the input field values when I calculate the other objects in the loop?

Based on the fact that I have all these functions in a Django loop, am I not supposed to get all the odds when I console.log(odds)

{% for p in prediction.prediction_data.all %}
  <form action="#" method="POST">
     <input type="number" value="" name="amount" id="amount" class="shares" onkeyup="CalculateNewBalance()">
     <input type="number" value="" name="shares" id="shares" class="shares" onkeyup="CalculateNewBalance()">

    <script>
      function CalculateNewBalance(){
          let stake_amount_input = document.querySelector(".amount").value
          let shares_amount_input = document.querySelector(".shares").value
          let potential_win = document.querySelector(".potential-win")

          let potential_win_value = parseFloat(stake_amount_input) * parseInt(shares_amount_input)
          potential_win.innerHTML = "$" + potential_win_value
          
          // if the potential_win innerHTML shows Nan, then i want to change the innerHTML to $0.00, but this is not working too
         if (potential_win === isNan) {
             potential_win.innerHTML = "$0.00"
         }

                                                        
    </script>
    </form>
{% endfor %}

EDIT: My template

<div class="mid-area">
    <div class="single-area">
        <div class="item-title d-flex align-items-center justify-content-between">
            <span>Choose Stake Amount</span>
        </div>
        <div class="d-flex in-dec-val">
            <input type="number" required value="{{ p.amount }}" name="amount" placeholder="amount" class="shares" />

            <div class="btn-area">
                <button class="plus" type="button">
                    <img src="{% static 'assets/images/icon/up-arrow.png' %}" alt="icon" />
                </button>
                <button class="minus" type="button">
                    <img src="{% static 'assets/images/icon/down-arrow.png' %}" alt="icon" />
                </button>
            </div>
        </div>

        <p id="error-div" class="mt-2"></p>
    </div>
    <div class="single-area quick-amounts"></div>
    <div class="single-area quick-amounts">
        <div class="item-title d-flex align-items-center">
            <p>Choose <b>Shares</b> Amount</p>
        </div>
        <div class="d-flex in-dec-val">
            <input type="number" required value="1" name="shares" placeholder="shares" class="shares" />

            <div class="btn-area">
                <button class="pldus" type="button">
                    <img src="{% static 'assets/images/icon/up-arrow.png' %}" alt="icon" />
                </button>
                <button class="mindus" type="button">
                    <img src="{% static 'assets/images/icon/down-arrow.png' %}" alt="icon" />
                </button>
            </div>
        </div>
    </div>

    <div class="single-area smart-value">
        <div class="item-title d-flex align-items-center">
            <p class="mdr text-capitalize">Potential win</p>
        </div>
        <div class="contact-val d-flex align-items-center"><span style="font-size: 24px;" class="potential-win">$0.00</span><br /></div>
    </div>
</div>

Ankit Tiwari · Accepted Answer · 2022-12-21T12:23:48.310

Instead of putting whole form & script inside loop just add input fields inside loop and then either set event on each element inside loop or add event listener programmatically. I'll show programmatic approch.

<form action="#" method="POST">
{% for p in prediction.prediction_data.all %}
     <input type="number" value="" name="amount" class="shares" onkeyup="CalculateNewBalance()">
     <input type="number" value="" name="shares" class="shares" onkeyup="CalculateNewBalance()">
{% endfor %}
</form>

 let inputs = document.querySelectorAll('input');
function CalculateNewBalance(e) {
    let target = e.target
    let potential_win_value;
    let potential_win;

    if (target.nextElementSibling.classList.contains('potential-win')) {
        potential_win = target.nextElementSibling
    } else {
        potential_win = target.nextElementSibling.nextElementSibling
    }

    if (target.nextElementSibling.classList.contains('shares')) {
        potential_win_value = parseFloat(target.nextElementSibling.value) * parseInt(target.value)
    } else {
        potential_win_value = parseFloat(target.previousElementSibling.value) * parseInt(target.value)
    }

    potential_win.innerHTML = "$" + potential_win_value

    if (potential_win.innerHTML == '$NaN') potential_win.innerHTML = '$0.00'
}

['input', 'change'].forEach(evt => {
    inputs.forEach(input => input.addEventListener(evt, CalculateNewBalance, false))
});

Here is working example

 let inputs = document.querySelectorAll('input');
        function CalculateNewBalance(e) {
            let target = e.target
            let potential_win_value;
            let potential_win;

            if (target.nextElementSibling.classList.contains('potential-win')) {
                potential_win = target.nextElementSibling
            } else {
                potential_win = target.nextElementSibling.nextElementSibling
            }

            if (target.nextElementSibling.classList.contains('shares')) {
                potential_win_value = parseFloat(target.nextElementSibling.value) * parseInt(target.value)
            } else {
                potential_win_value = parseFloat(target.previousElementSibling.value) * parseInt(target.value)
            }

            potential_win.innerHTML = "$" + potential_win_value

            if (potential_win.innerHTML == '$NaN') potential_win.innerHTML = '$0.00'
        }
        
        ['input','change'].forEach( evt => {
            inputs.forEach(input => input.addEventListener(evt, CalculateNewBalance, false))
        }
        );

<form action="#" method="POST">
        <input type="number" value="" name="amount" placeholder="amount" class="shares">
        <input type="number" value="" name="shares" placeholder="shares" class="shares">
        <span class="potential-win">$0.00</span><br />

        <input type="number" value="" name="amount" placeholder="amount" class="shares">
        <input type="number" value="" name="shares" placeholder="shares" class="shares">
        <span class="potential-win">$0.00</span><br />

        <input type="number" value="" name="amount" placeholder="amount" class="shares">
        <input type="number" value="" name="shares" placeholder="shares" class="shares">
        <span class="potential-win">$0.00</span><br />
    </form>

Note:

If you're creating application which includes real transactions & calculations of amount you should not rely on client side calculation handle it on server side.

Don't use ID inside loop it shold be unique

Thanks alot, your code is working as expected. The only thing is that i have some other elements wrapping my input fields so the `nextElementSibling` seem not to work when i use my template. Please what can i do? I have updated my code to include my template — Destiny Franks, Dec 21 '22 at 20:04
Hello @DestinyFranks Where is loop inside your **HTML** code if it's there then add that too. — Ankit Tiwari, Dec 22 '22 at 04:50

score 0 · Answer 2 · answered Dec 21 '22 at 10:03

You have to add unique name every time you loop. Variable names and Id's should be unique. For this you have to add counter or unique values. Check this answer for how to add counter.

{% for p in prediction.prediction_data.all %}
  
  <form action="#" method="POST">
     <input type="number" value="" name="amount" id="amount{{ forloop.counter }}" class="shares" onkeyup="CalculateNewBalance()">
     <input type="number" value="" name="shares" id="shares{{ forloop.counter }}" class="shares" onkeyup="CalculateNewBalance()">

    <script>
      function CalculateNewBalance(){
          let stake_amount_input{{ forloop.counter }} = document.querySelector(".amount{{ forloop.counter }}").value
          let shares_amount_input{{ forloop.counter }} = document.querySelector(".shares{{ forloop.counter }}").value
          let potential_win{{ forloop.counter }} = document.querySelector(".potential-win{{ forloop.counter }}")

          let potential_win_value{{ forloop.counter }} = parseFloat(stake_amount_input{{ forloop.counter }}) * parseInt(shares_amount_input{{ forloop.counter }})
          potential_win{{ forloop.counter }}.innerHTML = "$" + potential_win_value{{ forloop.counter }}
          
          // if the potential_win innerHTML shows Nan, then i want to change the innerHTML to $0.00, but this is not working too
         if (potential_win{{ forloop.counter }} === isNan) {
             potential_win{{ forloop.counter }}.innerHTML = "$0.00"
         }

                                                        
    </script>
    </form>
{% endfor %}

{{ forloop.counter }} returns a list of numbers from 1 to number, until for loop runs.

The This would make every id unique and every variable unique. For example, when the loop runs

for first time:

let potential_win1 = document.querySelector(".potential-win1").value

for second time:

let potential_win2 = document.querySelector(".potential-win2").value

and so on.

Javascript: how to get calculate multiple input values in loop using javascript?

2 Answers2

Linked