我正在做一个游戏,在开始时它要求你的名字。我希望这个名字能被保存为可变的:
<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);
}
它不工作,因为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);
}
首先,使你的标记更易携带/可重复使用。我还将按钮的类型设置为'按钮'
,而不是使用onsubmit
属性。如果表单需要与服务器交互,你可以将类型
属性切换为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);
下面是一个可以使用的、风格轻巧的演示: