Блог

Главная - Вопросы по программированию - как вычислить два текстовых поля html с помощью javascript

как вычислить два текстовых поля html с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

Я очень новичок в использовании javascript, и чтобы создать основу для программы, которая мне нужна, я пытаюсь добавить два значения из текстового поля вместе. Прямо сейчас он возвращает NaN, когда я вызываю javascript с помощью моей кнопки.

     <script>
         function add()
        {
             num1 =parseInt( document.getElementById("num1").value);
             num2 = parseInt(document.getElementById("num2").value);
        document.getElementById("result").innerHTML= num1 num2;
            
        
        }
        
    </script>
</head>
<body>
    <label id="num1">Number One:</label>
    <input type="text" id="num1"> 
    <br>
    <label id="num2">Number Two</label>
    <input type="text" id="num2">
    
    <button  onclick="add()">Calculate</button>
    <span id="result"></span>
</body>

Комментарии:

1. Идентификаторы должны быть уникальными в HTML-документе. Вы дважды использовали одни и те же идентификаторы, и поэтому вы обращаетесь к элементам label с помощью вызовов getElementById, а не к полям ввода. И метки не имеют значения. Метки должны иметь for атрибуты, которые ссылаются на идентификатор связанных полей ввода.

Ответ №1:

Идентификаторы должны быть уникальными. JS будет действовать только на первый идентификатор на странице.

У вас есть неуникальные идентификаторы: label и input имеют один и тот же идентификатор.

Заменить <label id=""> на <label for=""> 

 function add() {
  num1 = parseInt(document.getElementById("num1").value);
  num2 = parseInt(document.getElementById("num2").value);
  document.getElementById("result").innerHTML = num1   num2;
} 
 <label for="num1">Number One:</label>
<input type="text" id="num1"/>
<br/>
<label for="num2">Number Two</label>
<input type="text" id="num2"/>

<button onclick="add()">Calculate</button>
<span id="result"></span>

Ответ №2:

Вы допустили очень глупую ошибку, ваши идентификаторы всегда должны быть уникальными.

Просто удалите id атрибут из тега label.

Чтобы объяснить вам, что пошло не так в вашем коде,:

id s должны быть unqiue, и когда вы перемещали элемент по id , JS выбирал label элемент, и .value свойство этого элемента будет возвращено NaN , следовательно, результат.

Вы можете прочитать больше об ID здесь

Ответ №3:

Я советую вам не объявлять события javascript внутри html-элементов.

Кроме того, у вас была ошибка в структуре html. Вы дважды указали одну и ту же метку id и intup. Идентификатор должен быть уникальным, а для метки нужно указать for — это означает, что это label относится к соответствующему input :

 <label for="num1">Number One:</label>
<input type="text" id="num1"> 
 
 let btn = document.querySelector('#btn');
let result = document.querySelector('#result');

btn.onclick = function() {
let num1 = parseInt(document.querySelector('#num1').value);
let num2 = parseInt(document.querySelector('#num2').value);

   result.innerText = num1   num2;
} 
 <body>
    <label for="num1">Number One:</label>
    <input type="text" id="num1"> 
    <br>
    <label for="num2">Number Two</label>
    <input type="text" id="num2">   
    <button id="btn">Calculate</button>
    <span id="result"></span>
</body>

Метки: