javascript - 如何在javascript中用ID替换名称

标签 javascript html css

我正在开发一个小程序,并试图制作一些用户可以从列表中选择一个元素的东西“它就像一个餐厅菜单,用户可以在其中选择他们的食物,它显示价格和税收”,我使用 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>

最佳答案

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

您可以使用 de 类并通过 document.querySelectorAll('.items') 选择它

关于javascript - 如何在javascript中用ID替换名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60287609/

相关文章:

css - 如何将自定义 TrueType 字体与网站打包以便浏览器呈现它?

css - IE7 不加载 eot webfont

javascript - Promise.all 始终返回空数组

iPhone 显示屏宽度

html - 在特定分辨率下更改图像的高度

javascript - jquery警报($ ("window").height() + ""+ $ ("document").height() + ""+$ ("window").width());将所有值返回为 null

css - 如何使用 Ruby 为彼此相邻的表单设置样式

javascript - 如何检测用户何时单击已从选择中选择的元素?

javascript - 在 "export default"的上下文中递归调用函数?

javascript - jquery 尝试使用按键事件删除突出显示的元素