Как получить несколько значений ввода в цикле (шаблоне) django с помощью javascript?

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

У меня есть эта простая строка для получения id из поля ввода let odds = document.getElementById("odds").value

Исходя из того, что у меня есть все эти функции в цикле django, не должен ли я получить все шансы, когда я console.log(odds)

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

    <script>
      function CalculateNewBalance(){
          let odds = document.getElementById("odds").value
          let stake_amount_input = document.getElementById("amount")
                                                 
          console.log(odds);
    </script>
    </form>
{% endfor %}
[![enter image description here][1]][1]

enter image description here

Вместо использования id используйте class или attribute. потому что id используется для идентификации уникального элемента в DOM. Также вам не нужно помещать ваш скрипт внутрь цикла и вместо добавления формы внутри цикла поместить поля ввода.

Ваш окончательный код будет выглядеть следующим образом

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

<script>
  function CalculateNewBalance(e){
      let t = e.target;
      let odds = t.previousElementSibling.value
      let stake_amount_input = t
      console.log(odds);
  }
</script>

Выполнение примера кода

function CalculateNewBalance(e){
    let t = e.target;
    let odds = t.previousElementSibling.value
    let stake_amount_input = t
    console.log(odds);
}
<form action="#" method="POST">
    <input type="text" value="1.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">

    <input type="text" value="2.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">
    <input type="text" value="3.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">
  </form>

Вернуться на верх