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

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

javascript jquery html dom

Javascript 如何从多个文本框中获取输入,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我刚刚开始使用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"> &

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

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

函数addBox（）{
$（'#mathGrades'）。附加（'''）
};

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

函数addBox（）{
$（'#mathGrades'）。附加（'''）
};

您可以为新输入设置类名并使用for循环。（ID应该是唯一的）我不建议复制相同的ID，javascript将只读取具有该ID的第一个元素。ID必须是唯一的。尝试给他们一个公共名称或类，并使用jquery中的名称选择器或类选择器来引用这些文本框。您可以执行

$（'input[name=“someName”]'）。每个（函数（）{//your code}）

如果您使用的是name，或者您可以使用

$（'.className'）。each（function（）{//ur code}）其中“.className
”是应用于您输入的类。您可以为新输入设置类名并使用for循环。（ID应该是唯一的）我不建议复制相同的ID，javascript将只读取具有该ID的第一个元素。ID必须是唯一的。尝试给他们一个公共名称或类，并使用jquery中的名称选择器或类选择器来引用这些文本框。您可以执行$（'input[name=“someName”]'）。每个（函数（）{//your code}）
如果您使用的是name，或者您可以使用$（'.className'）。each（function（）{//ur code}）其中“.className
”是应用于您输入的类。我不太清楚，我在想，如果ID相同，我就可以从中提取所有信息……经验教训！那个代码实际上不起作用。当我尝试它时，我收到以下错误消息mathGrades[m]。val不是一个函数
。有什么想法吗？function getUserGrades（）{var userGrades=document.getElementsByClassName（“mathGrades”）；console.log（userGrades.length）；/*用于调试以查看userGrades是否为空*/var m；for（m=0；m
我在getUserGrades（）的上下文中编写了这个函数
你上面写的方法。我不知道我是否遗漏了什么（我准确地使用了你的代码），但它返回了未捕获的TypeError:userGrades[m]。attr不是一个函数，我不知道为什么。它确实记录了正确的长度，但随后我收到了错误消息。抱歉，如果我丢失了一些明显的$（mathGrades[m]）.val（）mathGrades[m]。val不是一个函数
。有什么想法吗？function getUserGrades（）{var userGrades=document.getElementsByClassName（“mathGrades”）；console.log（userGrades.length）；/*用于调试以查看userGrades是否为空*/var m；for（m=0；m
我在getUserGrades（）的上下文中编写了这个函数
你上面写的方法。我不知道我是否遗漏了什么（我准确地使用了你的代码），但它返回了未捕获的TypeError:userGrades[m]。attr不是一个函数，我不知道为什么。它确实记录了正确的长度，但随后我收到了错误消息。抱歉，如果我丢失了一些明显的$（mathGrades[m]）.val（）取而代之。