时间戳

首页 > 解决方案 > 如何遍历 HTML 元素并使用 for 循环对值求和

javascript - 如何遍历 HTML 元素并使用 for 循环对值求和

问题描述

我有一个问题，使用 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>

标签： javascripthtml

解决方案

改为输入type=number。还要检查typeof变量是否为数字。如果没有，您可以使用 JavaScript 函数对其进行转换parseInt()。

推荐阅读