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

Question

I am learning Javascript and trying to get user input value from input.

In my project, I have an input form, and when they add new number and click a button, and new form will appear, and user can put another number, and new input field will continue appearing as long as user clicks button.

What I want is to get value from each input. I saw some questions asking similar question, but .document.getElementsByName() didn't work for me.

let userInput = document.getElementsByName('moneyamount');
inputNum = parseInt(userInput.value);

console.log(inputNum); //result is NaN

I also tried document.querySelector()

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

console.log(inputNum) 

which worked perfect, but I need to get value from a few inputs, so querySelector will not be good for this situation. so I tried document.querySelectorAll() as well, however,

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

console.log(inputNum)// result is NaN

I am not sure what DOM I should use in this situation. I need to select all elements and need to get value from them.

This is my HTML of input. There is only one input at this moment, because when user clicks add button, new form will be added.

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

      </div>

I hope you guys could help this problem.

Thank you so much!

Answer 1

I feel the best way for you to handle this is to edit the innerHTML of the div.

for example:

<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>

This should allow you to do what I think you are asking.

Answer 2

You could do document.getElementById("money-amount").value to get the amount from the input. If you are asking for values from multiple inputs you should do.

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);
}
}
}

Then to access the first amount, you could do userinputs[0] , and so on.

Answer 3

Try this

 <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>