javascript - 如何在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>
解决方案
如果您有多个,则使用相同的 ID 是不正确的。
你可以使用 de class 并选择它document.querySelectorAll('.items')
推荐阅读
- android - 为什么我的布局看起来像这样?这是我的 XML 文件
- asp.net - 谷歌地图 API 方向服务重定向到 JSON 信息,但我如何让它在手机中打开地图应用程序?
- flutter - Flutter for loop 导致加载动画延迟
- javascript - 使用 appendchild 在 JavaScript 中将字符串转换为 DOM 节点(ul/li)
- java - 在数据库中搜索手机号码
- c++ - 返回我的数组索引号的两个总和(C++ 蛮力)问题
- android - 在 Kotlin 中将值格式化为人类可读形式的依赖性
- python - 分发 embed-cython-compiled .exe 并在没有 python 的情况下运行另一台机器
- node.js - 如何在运行时动态创建/修改 Angular 9 项目结构中的 sitemap.xml 文件?
- nix - nix-shell 的等效 shell.nix 是什么?
' - 一个 gnused