首页 > 解决方案 > 如何在javascript中用ID替换名称

问题描述

我正在开发小程序并尝试制作一些用户可以从列表中选择一个项目的东西“它就像一个餐厅菜单,用户可以在其中选择他们的食物并显示价格和税收”,我使用 name="items[ ]" 来获取值,我想知道是否有办法使用 ID 或 Class 而不是名称。任何帮助都将提前表示感谢。

var count = 0;
var tax = 0.05;




var taxFeild = document.getElementById("Tax");
var checkBoxes = document.getElementById("checkBoxes");
var checks=document.querySelectorAll('.items');
var ItemTotal=document.getElementById('ItemTotal');
var Total=document.getElementById('TotalWithTax');
var btn = document.getElementById("btn");


function Calculate()
{
  initVariable();
  
 for(var i =0 ;i< checks.length;i++)
   {
     if(checks[i].checked)
       {
         count+=parseFloat(checks[i].value);
       }
   }
  ItemTotal.innerHTML +=count;
  taxFeild.innerHTML+=(parseFloat(tax*count));
  Total.innerHTML+= (tax*count) + count;
}

btn.addEventListener('click',Calculate);


function initVariable()
{
  count =0;
  ItemTotal.innerHTML="Item Total: ";
  taxFeild.innerHTML =" Tax: ";
  Total.innerHTML ="Total with Tax: ";
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>

<head>
 

<title>Test</title>
</head>

<body>
  <div class = "container">
   <div id="checkBoxes">
  <input type="checkbox" class="items" value='7.99' id="item1">Fried Chicken ($7.99)<br>
  <input type="checkbox" class="items" value='9.99' id="item1"> Fried Halibut ($9.99)<br>
  <input type="checkbox" class="items" value='12.99' id="item1"> Hamburger ($12.99)<br><br>
    </div>
   <button id="btn">Calculate</button>
  
    
    <div id="Sums">
      <p id="ItemTotal"> Item Total: </p>
      <p id="Tax"> Tax: </p>
      <p id="TotalWithTax">Total with Tax: </p>
      
    </div>
  </div>  
  
  
  
</body> 
    
</html>

标签: javascripthtmlcss

解决方案


如果您有多个,则使用相同的 ID 是不正确的。

你可以使用 de class 并选择它document.querySelectorAll('.items')


推荐阅读