Javascript: как получить вычисление нескольких входных значений в цикле с помощью javascript?

Я пытаюсь вычислить значение некоторого поля ввода в моем шаблоне django, используя javascipt (onkeyup=(), форма находится в цикле, например {% for p in prediction %} {% endfor %}.

У меня есть эта простая строка для получения входных значений (ПРИМЕЧАНИЕ: Они находятся в цикле) 

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

Исходя из того, что у меня есть все эти функции в цикле django, не должен ли я получить все значения полей ввода, когда я вычисляю другие объекты в цикле.

Исходя из того, что у меня есть все эти функции в цикле django, не должен ли я получить все коэффициенты, когда я 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 %}

enter image description here enter image description here

Вы должны добавлять уникальное имя каждый раз, когда вы выполняете цикл. Имена переменных и их идентификаторы должны быть уникальными. Для этого вы должны добавить счетчик или уникальные значения. Посмотрите в этом ответе, как добавить счетчик.

{% 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 }} возвращает список чисел от 1 до числа, пока не выполнится цикл for.

Это сделает каждый идентификатор уникальным и каждую переменную уникальной. Например, когда выполняется цикл

в первый раз: 

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

во второй раз: 

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

и так далее.

Вместо того, чтобы помещать всю форму & скрипт внутри цикла, просто добавьте поля ввода внутри цикла, а затем либо установите событие на каждый элемент внутри цикла, либо добавьте слушателя события программно. Я покажу программный подход.

<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))
});

Вот рабочий пример

 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>

Примечание:

  1. Если вы создаете приложение, включающее реальные транзакции и вычисления суммы, вам не следует полагаться на вычисления на стороне клиента. обрабатывайте их на стороне сервера.
  2. Не используйте ID внутри цикла, он должен быть уникальным
Вернуться на верх