从输入中获取用户输入的值

Question

我正在学习Javascript，并试图从输入中获得用户输入值。

在我的项目中，我有一个输入表单，当他们添加新的数字并点击一个按钮时，新的表单就会出现，用户可以输入另一个数字，只要用户点击按钮，新的输入字段就会继续出现。

我想要的是从每个输入中获得价值。我看到一些问题问了类似的问题，但.docent.getElementsByName((对我不起作用。

let userInput = document.getElementsByName('moneyamount');
inputNum = parseInt(userInput.value);
console.log(inputNum); //result is NaN

我也试过document.querySelector((

let userInput = document.querySelector('#money-amount');
inputNum = parseInt(userInput.value);
console.log(inputNum) 

它运行得很好，但我需要从一些输入中获取值，所以querySelector不适合这种情况。所以我也尝试了document.querySelectorAll((，但是

let userInput = document.querySelectorAll('#money-amount');
inputNum = parseInt(userInput.value)
console.log(inputNum)// result is NaN

我不确定在这种情况下应该使用什么DOM。我需要选择所有元素，并从中获得价值。

这是我的HTML输入。此时只有一个输入，因为当用户单击添加按钮时，将添加新表单。

<input
class="input money"
type="number"
id="money-amount"
placeholder="Enter amount"
name="moneyamount"
required
/>
</div>

我希望你们能帮助解决这个问题。

非常感谢！

Answer 1

我觉得处理这个问题的最好方法是编辑div的innerHTML。

例如：

<div id="allTheForms">
<form action="#" onsubmit="addForm();">
<input type="text">
<button type="submit">Submit</button </form>
</div>
<script>
function addForm() {
var currentHTML = document.getElementById("allTheForms").innerHTML;
var newForm = '<form action="#" onsubmit="addForm();"><input type="text"><button type="submit">Submit</button</form>';
document.getElementById("allTheForms").innerHTML = currentHTML + newForm;
}
</script>

这应该允许你做我认为你在要求的事情。

Answer 2

试试这个

<input type='text' required id='input' onchange="check()">
<p id='output'>null</p>
<!-- the javascript -->
<script type='text/javascript'>
function check(){
//set the value as a let
let input = document.querySelector('#input').value;
//show it
document.querySelector('#output').textContent = input;
}
</script>

Answer 3

您可以执行document.getElementById("money-amount").value从输入中获取金额。如果你要求从多个输入值，你应该这样做。

var userinputs = [];
function getInputs() {
var elem = document.getElementsByClassName("input money");
for (var i = 0; i < elem.length; i++) {
if (typeof elem[i].value !== "undefined") {
userinputs.push(elem[i].value);
}
}
}

然后要访问第一个数量，可以执行userinputs[0]，依此类推