如何从多个文本框中获取输入

Question

我刚刚开始使用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();

Answer 1

首先，您可能知道这一点，但是我想以任何方式指出这一点，您的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">')
};

如何从多个文本框中获取输入

问题描述

1 个解决方案

解决方案1
0 2015-07-21 00:01:49

如何从多个文本框中获取输入

问题描述

1 个解决方案

解决方案1 0 2015-07-21 00:01:49

解决方案1
0 2015-07-21 00:01:49