个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在做 JavaScript 膳食营养计算器。它是一个有 5 行的模板，每行有 4 个输入，所以总共有 20 个，type=value。每个输入都有不同的 ID。
有没有办法同时读取所有输入而不用重复“var x = document.getElementById('x').value” 20 次？
最好的，
<html>
<head>
</head>
<body>
<div>
<h1>Calculator</h1>
<div>ingredient:
<input type="number" id="x" placeholder="x">
<input type="number" id="y" placeholder="y">
<input type="number" id="z" placeholder="z">
<input type="number" id="a" placeholder="a"></div>
<button onclick="calo()" id="cal">Go</button>
<h1>Facts</h1>
</div>
<div id="result">Result is displayed here.</div>
</body>
</html>
function calo() {
const [x,y,z,a] = [...document.querySelectorAll('input')];
document.querySelector("pre").textContent = x.outerHTML + "\n" + y.outerHTML + "\n" + z.outerHTML + "\n" + a.outerHTML;
var calculate = x + y + z + a;
document.getElementById("result").innerHTML = calculate;}
最佳答案
您可以使用 document.querySelectorAll .
document.querySelectorAll('input')
.forEach(input=>console.log("Id:", input.id, "Value:", input.value));
如果你想将 input 元素声明为单独的变量，你可以使用 destructuring assignment .示例:
const [x,y,z] = document.querySelectorAll('input');
document.querySelector("pre").textContent
= x.outerHTML + "\n" + y.outerHTML + "\n" + z.outerHTML;<input type="number" id="x">
<input type="number" id="y">
<input type="number" id="z">
<pre></pre>关于javascript - 如何在 Javascript 中获取用户的多个输入？如何为所有人声明变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62563714/
24
4
0
我是一名优秀的程序员,十分优秀！