Блог

Главная - Вопросы по программированию - как выполнить итерацию по элементам HTML и суммировать значения с помощью цикла for

как выполнить итерацию по элементам HTML и суммировать значения с помощью цикла for

#javascript #html

Вопрос:

у меня возникла проблема с использованием цикла for для суммирования значений через элементы внутри HTML нажатием кнопки, но код работал неправильно, также я пытался показать оповещение о массаже, в котором говорится «не число«, но каждый раз показываю один и тот же массаж, как только я нажимаю кнопку

  <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=, initial-scale=1.0">
     <title>Document</title>
    </head>
    <body>
     <input class="inp" type="" placeholder="Enter  a Number " > 
     <input class="inp" type="" placeholder="Enter  elec" > 
     <input class="inp" type="" placeholder="Enter  food  " > 
     <input class="inp" type="" placeholder="Enter  car " > 
     <input class="inp" type="" placeholder="Enter  resturent " >
      
     <h1 class="total">total</h1>
     <button class="btn">calculate</button>
     <script 
        const btn= document.querySelector('.btn')
        const total = document.querySelector('.total')
        const inp = document.querySelectorAll('.inp')
    
    
    
    btn.addEventListener('click',function(){
    
    if (isNaN(inp.value)) {
      alert("Not a number")
      console.log(inp.value);
    } if (inp.value === ""){
      alert("enter  number ")
    
    } 
    
     for (let i = 0; i <inp.length; i  ) {
      let index = 0
      const current = index   inp[i].value 
       total.innerHTML = index
    
    }
    
    })
   </script>
    </body>
    </html>

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

1. «пусть индекс = 0» должен быть перед циклом.

2. Тип ввода по умолчанию-текст. Преобразуйте их в числа, если вы хотите использовать их для расчета, в противном случае isNaN всегда будет возвращать значение true

3. Кроме того, inp будет содержать коллекцию элементов DOM, поэтому, если вы хотите проверить значение, вам придется выполнить итерацию через inp.

4. в качестве дополнительного замечания, имеет очень мало смысла, чтобы классы в основном отображались на соответствующий тег. <button class="primary"> в этом всегда будет гораздо больше смысла <button class="btn"> …

5. Вот один из способов: jsfiddle.net/52atj3f4

Ответ №1:

Переключитесь на ввод type=number . Также проверьте typeof , является ли переменная числом. Если нет, вы можете преобразовать его с помощью функции JavaScript parseInt() .

Ответ №2:

Пожалуйста, измените тип ваших входных данных, затем переместите «проверку» внутри цикла, затем переместите счетчик за пределы цикла и измените его на «пусть», затем приведите к номеру входное значение перед суммированием в текущее.

хорошего дня

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="inp" type="number" placeholder="Enter  a Number ">
    <input class="inp" type="number" placeholder="Enter  elec">
    <input class="inp" type="number" placeholder="Enter  food  ">
    <input class="inp" type="number" placeholder="Enter  car ">
    <input class="inp" type="number" placeholder="Enter  resturent ">

    <h1 class="total">total</h1>
    <button class="btn">calculate</button>

    <script>
        let btn = document.querySelector('.btn')
        btn.addEventListener('click', function () {
            const total = document.querySelector('.total')
            const inps = document.querySelectorAll('.inp')
            let current = 0;
            for (let i = 0; i < inps.length; i  ) {
                if (isNaN(inps[i].value)) {
                    alert("Not a number")
                    break;

                } if (inps[i].value == "") {
                    alert("enter  number ")
                    break;
                }
                current  =  inps[i].value
                total.innerHTML = current
            }
        })
    </script>
</body>

</html>
Метки: