Как сохранить пользовательский ввод в переменную в html и js

Я делаю игру, и в начале она спрашивает ваше имя. Я хочу, чтобы это имя было сохранено как varible. у меня есть этот html код:

<form id="form" onsubmit="return false;">
<input   style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput">
<input   style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="name()">
</form>

и это часть javascript:

function name()
{
var input = document.getElementById("userInput");
alert(input);
}
6
html javascript user-input

3 ответов

Он не работает, потому что name - зарезервированное слово в JavaScript. Изменить имя функции на что-то другое.

см.http://www.quackit.com/javascript/javascript_reserved_words.cfm

<form id="form" onsubmit="return false;">
    <input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" />
    <input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" />
</form>

function othername() {
    var input = document.getElementById("userInput").value;
    alert(input);
}
12

сначала сделайте разметку более портативной / многоразовой. Я также установил тип кнопок в 'button' вместо . Вы можете переключить до submit если форма должна взаимодействовать с сервером.

<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
    <lable id='nameLable' for='nameField'>Create a username:</lable>
    <input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
    <button id='subButton' type='button'>Print your name!</button>
</div>
</form>

<div>
    <p id='result'></p></div>
</div>

далее напишите общую функцию для извлечения имени пользователя в переменную. Он проверяет, чтобы переменная, содержащая имя пользователя, имела в себе минимум три символа. Ты можешь изменить это на любую постоянную величину. хотеть.

function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');

if (nameField.length < 3) {
    result.textContent = 'Username must contain at least 3 characters';
    //alert('Username must contain at least 3 characters');
} else {
    result.textContent = 'Your username is: ' + nameField;
    //alert(nameField);
}
}

далее я создал прослушиватель событий для кнопки. Обычно считается плохой практикой иметь встроенные вызовы js.

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);

вот рабочая и слегка стилизованная демо:

CodePen демо этого ответа.

4

измените javascript на:

var input = document.getElementById('userInput').value;

Это получит значение, которое было типов в текстовом поле, а не объект DOM

0