我刚刚开始使用 JavaScript 和 Jquery，但遇到了障碍。我希望用户能够添加和减去框并用输入填充它。这是我的 html
<body>
<h1>Math Grades</h1>
<div id="mathGrades">
<input style="height:50px; width:50px; font-size:16pt; text-align: center" type='number' id="fooBar">
<input style="height:50px; width:50px; font-size:16pt; text-align: center" type='number' id="fooBar">
</div>
<button type="button" id="addBox">+</button>
<button type="button" id="subtractBox">-</button>
<br>
<button type="button" id="getGrades">Submit Grades</button>
<script src="calcjq.js"></script>
这是我的代码:
$(document).ready(function() {
var addMathBox = document.getElementById("addBox");
addMathBox.addEventListener('click', addBox, false);
var subtractMathBox = document.getElementById("subtractBox");
subtractMathBox.addEventListener('click', subtractBox, false);
var getScores = document.getElementById("getGrades");
getScores.addEventListener('click', getUserGrades, false);
function getUserGrades(){
var userGrades = document.getElementById("fooBar").value;
console.log(userGrades);
}
function subtractBox(){
$('#fooBar').remove()
}
function addBox(){
$('#mathGrades').append('<input style="height:50px; width:50px; font-size:16pt; text-align: center" type="number" id="fooBar">')
};
});
在不知道他们将添加和填充多少个框的情况下，如何确保收集所有输入？
编辑
终于找到了一种方法:
var mathGrades = $("input[class='mathGrades']")
.map(function(){return parseInt($(this).val(), 10);}).get();
最佳答案
首先，您可能知道这一点，但我想以任何方式指出，您的 id 属性对于每个元素应该是唯一的。因此，请确保所有这些都不是 foobar。
要解决您的问题，您可以做的是向每个输入添加一个独特的类，即 mathGrades，然后使用以下代码收集所有数据并按照您的意愿进行处理。
var mathGrades = document.getElementsByClassName('mathGrades');
var m, v;
for(m in mathGrades) {
v = $(mathGrades[m]).val(); // takes value and converts to string i.e. "1"
$(mathGrades[m]).val(v+1); // assigns new value "1" + "1" = "11"
}
在您的 JavaScript 中，您可以将函数 addBox 更改为:
function addBox() {
$('#mathGrades').append('<input style="height:50px; width:50px; font-size:16pt; text-align: center" type="number" class="mathGrades">')
};
关于javascript - 如何从多个文本框中获取输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31528201/