javascript объединяет числа ТОЛЬКО при добавлении второго getElementbyId - PullRequest
Новая
       8

javascript объединяет числа ТОЛЬКО при добавлении второго getElementbyId

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

Пожалуйста, не отмечайте это как дубликат. Это похоже на следующее, но не то же самое.

Я смотрел:

Javascript объединение чисел, не суммируя и: Как добавить две строки, как если бы они были числами? и: внутренний HTML вернуть NaN с текстом

Вот мой код: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>


<form action="PayslipServlet" method="get">
          First Number:    <input type="text" name="n1" id="n1"><br/>
          Second Number:   <input type="text" name="n2" id="n2"><br/>
          Sum: <span id="Sum"></span>
          <br>
          <input type="button" value="Submit" onClick="pr()">
        </form>

        <script>
          function pr() {
            var foobar = 100;
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->
            <!-- works -->
            <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->
            <!-- concatenates as strings: why? -->
            document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value  ;
          }
        </script>



</head>

Постановка задачи:

Когда я возвращаю n1 к сумме, работает (пожалуйста, см. Прокомментированные строки) Когда я возвращаю n2 к сумме, работает Когда я кормлю n1 + foobar для суммирования, работает

НО, когда я возвращаю n1 + n2 обратно к сумме, я получаю объединенную строку (например, 1 + 2 становится 12, а не 3).

Что я делаю не так?

Спасибо!

Ответы [ 3 ]

1 голос
/ 10 апреля 2020

Вам необходимо использовать директиву parseInt для преобразования входных значений в тип данных int. Вот код: 

    <script>
      function pr() {
        var foobar = 100;
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->
        <!-- works -->
        <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->
        <!-- concatenates as strings: why? -->
        document.getElementById("Sum").innerHTML = parseInt(document.getElementById('n1').value) +parseInt(document.getElementById('n2').value)  ;
      }
    </script>
1 голос
/ 10 апреля 2020

Вы используете два разных вида + с. С первыми двумя: 

<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value  ; works -->
<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value  ; works -->

выполняется операция leftSide = +expression

Это оператор унарный плюс , который приводит не числа к числам.

В третьем: 

<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar  ; -->

выполненная операция leftSide = +expression1 + expression2

Унарный плюс используется на expression1, чтобы превратить его в число. Но + между expression1 и expression2 - это не унарный плюс, а сложение / объединение . Когда между двумя выражениями используется +, если оба числа c, они добавляются вместе. Здесь после унарного плюса на .value это число, а foobar тоже число, поэтому они складываются вместе.

Но в 

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value

Теперь Правильное выражение - это строка , а не число. + добавляется только тогда, когда обе стороны являются числами. someNumber + someString приводит к объединению.

Если вы хотите добавить, убедитесь, что обе стороны + являются числами вначале.

1 голос
/ 10 апреля 2020

Вам необходимо преобразовать оба значения в числа перед их добавлением, так что вы получите сложение, а не конкатенацию. 

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value + +document.getElementById('n2').value  ;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...