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

Question

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

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

我想要从每个输入中获取价值。我看到了一些类似的问题，但是.document.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>

这应该允许您按照我的要求去做。