Почему мой javascript не выводит всего четыре числа в форме html? - PullRequest
Новая
       9

Почему мой javascript не выводит всего четыре числа в форме html?

0 голосов
/ 01 апреля 2020

Это небольшая часть более крупного проекта. Почему не выводится сумма четырех чисел и не отображается в пятом текстовом поле? 

<body>
<form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self">
<p></p>

<input name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH2" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH3" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH4" type="number" value="0" size="5" maxlength="5" onchange="calc"/>


<label for="S1TotH"></label>
<input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/> 
</form>

<script type="text/javascript">
function calc(){
var S1TotH =<br />
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;

document.getElementById('S1TotH').value = S1TotH;
}
</script>

</body>

Ответы [ 3 ]

0 голосов
/ 01 апреля 2020

Вы не вызываете функцию

Упоминание имени переменной (даже если значение этой переменной является функцией) не вызывает функцию.

Вам нужно поставить (argument, list) после него. 

 onchange="calc()"

Intrinsi c Атрибуты событий имеют кучу проблем (например, этот ) и их лучше избегать.

Вместо этого можно использовать делегированный прослушиватель событий. 

function calc(event) {
  const input = event.target;
  console.log(input.value);
}

document.querySelector("form").addEventListener("change", calc);
<form>
  <input type="number">
  <input type="number">
  <input type="number">
  <input type="number">
</form>

У вас нет id s

Тогда он будет работать, но ошибка, потому что вы используете getElementById без элементы с id атрибутами.

Вы объединяете не добавляя

Как только вы это исправите, вы все равно не будете добавлять значения, потому что серверы + выполняют двойную функцию оператор конкатенации и значения строки .

Вам необходимо преобразовать их в числа (например, с помощью parseFloat).

0 голосов
/ 01 апреля 2020

Этот код должен работать, используйте oninput вместо onchange для отражения реальных изменений, я также исправил несколько других ошибок. 

<body>
<form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self">
<p></p>

<input name="OneH1" id="OneH1" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH2" id="OneH2" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH3" id="OneH3" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH4" id="OneH4" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>


<label for="S1TotH"></label>
<input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/> 
</form>

<script type="text/javascript">
function calc(){
var S1TotH = 
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;

document.getElementById('S1TotH').value = S1TotH;
}
</script>

</body>

Приведенный выше код объединит значения, так как это пока значения строки , поэтому вам нужно использовать parseInt () функция, если вы хотите преобразовать ее в числа

0 голосов
/ 01 апреля 2020

Вам необходимо добавить идентификатор в качестве атрибута: 

<input id="OneH1" name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>

Также для вызова метода необходимо создать обработчик: 

<script type="text/javascript">
  function calc() {
    // This doesn't work since <br/> has no type (e.g. var S1TotH = '<br />')
    var S1TotH =<br />

    /* This values need to be stored in a variable or used in some way
    (e.g. var S1TotH = document.getElementById('OneH1').value + document...). But be careful because in this way you are concatenating the
    values, not adding them. If you want to add them you 
    should convert them to numbers (e.g. parseFloat(document.getElementById('OneH1').value)) */

    document.getElementById('OneH1').value +
    document.getElementById('OneH2').value +
    document.getElementById('OneH3').value +
    document.getElementById('OneH4').value;

    document.getElementById('S1TotH').value = S1TotH;
  }

  // use 'input' or 'change' event 
  document.querySelector('input').addEventListener('input', function () {
      calc();
  });
</script>
...