Как сохранить пользовательский ввод из DOM в переменной Javascript?

Question

Как я могу взять число, которое пользователь ввел в форму HTML, и сохранить его как переменную javascript, которую можно использовать во всем документе javascript?

Например, пользователь вводит "8",нажимает enter, который затем записывается как переменная, называемая «input», которая может использоваться любым последующим JavaScript:

// How to get input value entered from user?

var triple = input*3

console.log(triple);

Answer 1

Если вы хотите создать глобальную переменную, вы можете сделать это, используя var.MSDN определяет область действия var как «Область переменной, объявленной с помощью var, является ее текущим контекстом выполнения, который является либо включающей функцией, либо, для переменных, объявленных вне какой-либо функции, глобальным. Если вы повторно объявите переменную JavaScript, она будетне теряйте своего значения. "

Все, что вам нужно сделать, это объявить переменную input вне любой функции или блока объекта.Вот мой JSFiddle

var globalVar = 5; //global variable
var f1 = function() {
	var inpt = document.getElementById('myInput');
  console.log('input value = ' + inpt.value);
  console.log('globalVar value inside f1 = ' + globalVar);
}
f1(); //function call

var f2 = function() {
	globalVar = globalVar + 1;
	console.log('globalVar value inside f2 = ' + globalVar);
}
f2(); //function call

<input value="10" id="myInput">

Answer 2

Чтобы получить ввод через поле ввода HTML, вы можете сделать что-то вроде следующего:

var triple;

document.getElementById('input').addEventListener('keyup', event => {
  
  // When user presses the enter key, then we update triple based on the 
  // current value of the input
  if(event.keyCode === 13) {
    
    triple = parseInt(event.currentTarget.value) * 3;
    console.log(triple)
  }
});

<input id="input" />

Здесь прослушиватель событий регистрируется с элементом input для обнаружения keyup событий.Когда пользователь нажимает клавишу ввода (т. Е. event.keyCode === 13), переменная triple обновляется на основе значения, введенного пользователем в этот ввод.

Answer 3

Есть несколько способов получить пользовательский ввод в javascript.

• Использование prompt().Prompt - это функция, которая позволяет вам вызвать диалоговое окно, в котором вы можете ввести текст, цифры и т. Д. Текст, который вы вводите в качестве аргумента, будет действовать как заголовок всплывающего предупреждения.

Взгляните на фрагмент ниже для примера:

let input = prompt("Enter a number:"); // Input in string format
let triple = input * 3; // Convert string to integer by using * operation
console.log(triple);

• Другой способ получения пользовательского ввода - через элементы ввода HTML.Существует несколько различных типов элементов ввода, которые вы можете использовать, такие как пароль, число, дата, текст и т. Д. ... Для вашего вопроса вы можете использовать number.Вы можете создать ввод числа, например, в HTML:

<input type="number" id="number" value="0" />

Здесь атрибут type указывает, что мы будем вводить число в качестве ввода.Атрибут id предоставляет нам способ ссылки на этот элемент ввода в javascript, чтобы мы могли позднее получить число, введенное в него.А атрибут value является необязательным атрибутом, который задает значение по умолчанию для поля ввода.

При работе с полями ввода необходимо указать, когда javascript должен проверять поле ввода для значения.Вы можете сделать это, добавив прослушиватель событий, чтобы ваш javascript запускал часть кода каждый раз, когда пользователь вводит число.Вот пример добавления прослушивателя событий в наше поле ввода номера, чтобы оно вызывало изменение числа в нем:

document.getElementById('number').addEventListener('keyup', function(e) {/* do code */});

В приведенной выше строке мы ссылаемся на поле ввода через его идентификатор (number) и добавив в него прослушиватель событий ввода.

Используя этот прослушиватель событий, мы можем использовать ключевое слово this внутри функции для ссылки на само поле ввода.Это позволяет нам сделать this.value, чтобы получить значение введенного числа.Здесь я также использую e.keyCode, чтобы определить, какая клавиша была нажата.Если keyCode равен 13 ( ENTER ), то код будет регистрировать результат, в противном случае (иначе) он ничего не будет делать.

См. Рабочий пример ниже:

document.getElementById('number').addEventListener('keyup', function(e) {
  if(e.keyCode == 13) { // Check if enter key pressed
      let triple = this.value * 3; // Get value of text box using this.value
      console.log(triple);  
  }
});

<input type="number" id="number" value="0" />

Answer 4

Просто добавьте подсказку, чтобы создать кон в верхней части вашего кода JavaScript:

const input = parseInt(prompt("Enter a number: "));

И теперь вы можете делать все, что захотите:

const input = parseInt(prompt("Enter a number: "));
var triple = input * 3;
console.log(triple);

Answer 5

Ваш вопрос немного сбивает с толку, однако, исходя из моего понимания вашего вопроса -

Если вы хотите прочитать значение, введенное в текст HTML, в коде сценария Java используйте ниже -

         <html>
         <body>
         <script language="javascript" >

          function click_me()
          {
             var x=document.getElementById("numberInput").value;
             alert(x);
           }

        </script>

         Enter a number <input type="text" id="numberInput">
         <button onclick="click_me()">Click me</button>
         </form>
         </body>
         </html>

Answer 6

Простой способ добиться того, что вам нужно, - это метод prompt().Это заставляет браузер отображать простой диалог ввода, из которого вы можете получить пользовательский ввод и сохранить его в переменной input, например:

var input = prompt(); // This causes a input dialog to be display. If the user clicks ok, 
                      // then the result of prompt() is the value entered by the user
var triple = input * 3;

console.log(triple);