Как сохранить пользовательский ввод из DOM в переменной Javascript?
Как я могу взять число, введенное пользователем в HTML-форму, и сохранить его как переменную javascript, которую можно использовать во всем документе javascript?
Например, пользователь вводит «8», нажимает клавишу ВВОД, которая затем будет записана как переменная с именем «ввод», которая может использоваться любым последующим javascript:
// How to get input value entered from user?
var triple = input*3
console.info(triple);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(triple);Это, конечно, окольный путь к достижению этого ... но я надеялся получить ввод пользователя из html.
@Ayma, я вижу - вот решение, которое демонстрирует это: stackoverflow.com/a/53799335/8526705
Ваш вопрос немного сбивает с толку, однако, исходя из моего понимания вашего вопроса -
Если вы хотите прочитать значение, введенное в текст 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>
Извините за это, я постараюсь объяснить более понятно. Если бы пользователь ввел «8» в html-форме. Как мне взять эту цифру 8 и сохранить ее в переменной, которую можно использовать в файле javascript?
Просто добавьте запрос на создание жулика в верхней части кода JavaScript:
const input = parseInt(prompt("Enter a number: "));
И теперь вы можете делать все, что хотите:
const input = parseInt(prompt("Enter a number: "));
var triple = input * 3;
console.info(triple);Есть несколько способов получить пользовательский ввод в javascript.
- Используя
prompt(). Подсказка - это функция, которая позволяет вам вызвать диалоговое окно, в котором вы можете вводить текст, числа и т. д. Текст, который вы вводите в качестве аргумента, будет действовать как заголовок всплывающего предупреждения.
Взгляните на приведенный ниже фрагмент для примера:
let input = prompt("Enter a number:"); // Input in string format
let triple = input * 3; // Convert string to integer by using * operation
console.info(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.info(triple);
}
});<input type = "number" id = "number" value = "0" />Не беспокойтесь, рад помочь :)
Чтобы получить ввод через поле ввода 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.info(triple)
}
});<input id = "input" />Здесь прослушиватель событий зарегистрирован в элементе input для обнаружения событий keyup. Когда пользователь нажимает клавишу ввода (например, event.keyCode === 13), тогда переменная triple обновляется на основе значения, введенного пользователем в этот ввод.
Спасибо за ответ. Когда нажимаю "ввод", ничего не происходит. Я знаю, что ваш код правильный, поэтому с моей стороны должно быть что-то не так. Однако я скопировал код в точности как есть. Единственная разница в том, что я помещаю <input id = "input" /> в длинный html-файл. В консоли тоже нет ошибок ... Знаете, что я тут делаю не так?
@Ayma рад, что смог помочь :)
можно ли поместить console.info (triple) вне document.getElementById, где «input» равен 3, а 9 записывается в консоль? Прямо сейчас он вложен внутрь.
Да, конечно, но я просто поместил console.info в обработчик событий, чтобы обновленное значение записывалось в консоль при изменении его значения. Вам нужно было что-то другое?
Неважно, я просто понял, что это не имеет особого значения, потому что в любом случае я могу добавить любой код, который захочу, в «если». Я такой глупый.
В очередной раз благодарим за помощь!
Привет, @Ayma, никаких проблем - дайте мне знать, если я могу еще чем-нибудь помочь :)
Если вы хотите создать глобальную переменную, вы можете сделать это с помощью var. MSDN определяет область действия var как «Область действия переменной, объявленной с помощью var, - это ее текущий контекст выполнения, который является либо включающей функцией, либо глобальным для переменных, объявленных вне любой функции. Если вы повторно объявите переменную JavaScript, она будет не потерять свою ценность ».
Все, что вам нужно сделать, это объявить переменную input вне какой-либо функции или блока объекта. Вот мой JSFiddle
var globalVar = 5; //global variable
var f1 = function() {
var inpt = document.getElementById('myInput');
console.info('input value = ' + inpt.value);
console.info('globalVar value inside f1 = ' + globalVar);
}
f1(); //function call
var f2 = function() {
globalVar = globalVar + 1;
console.info('globalVar value inside f2 = ' + globalVar);
}
f2(); //function call<input value = "10" id = "myInput">
Один из способов добиться этого - использовать
document.selectorи нацелить желаемый ввод и получить от него ценность.