如何将用户输入保存到html和js中的变量中

Question

我正在制作一个游戏,一开始它会询问你的名字.我希望将此名称保存为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);
}

Answer 1

它不起作用,因为它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);
}

Answer 2

首先使您的标记更便携/可重用.我还将按钮类型设置为'button'而不是使用onsubmit属性.如果表单需要与服务器交互,您可以切换type属性submit.

<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
    <label id='nameLable' for='nameField'>Create a username:</label>
    <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演示.