Получить значение пользовательского ввода из ввода - PullRequest
Новая
       8

Получить значение пользовательского ввода из ввода

1 голос
/ 14 марта 2020

Я изучаю 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>

Надеюсь, что вы, ребята, могли бы помочь с этой проблемой.

Большое вам спасибо !

Ответы [ 3 ]

0 голосов
/ 18 марта 2020

Вы можете сделать 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] и т. Д.

0 голосов
/ 18 марта 2020

Попробуйте это 

<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>
0 голосов
/ 14 марта 2020

Мне кажется, что лучший способ справиться с этим - отредактировать внутренний HTML элемента div.

, например: 

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

Это должно позволить вам делать то, что Я думаю, что вы спрашиваете.

...