如何将用户输入保存到HTML和JavaScript中的变量中
How to save user input into a variable in HTML and JavaScript
我正在制作一个游戏,在开始时它会询问你的名字,我希望这个名字保存为变量
这是我的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);
}
它不起作用,因为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);
}
首先,使标记更加可移植/可重用。我还将按钮的类型设置为'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演示。
将您的javascript更改为:
var input = document.getElementById('userInput').value;
这将获得已键入文本框中的值,而不是DOM对象
您可以同时使用PHP和JavaScript:
<input type="hidden" id="CatId" value="<?php echo $categoryId; ?>">
现在更新JavaScript:
var categoryId = document.getElementById('CatId').value;
<html>
<input type="text" placeholder ="username" id="userinput">
<br>
<input type="password" placeholder="password">
<br>
<button type="submit" onclick="myfunc()" id="demo">click me</button>
<script type="text/javascript">
function myfunc() {
var input = document.getElementById('userinput');
alert(input.value);
}
</script>
</html>
我的意思是,如果HTML方面不需要该变量,那么提示脚本就会起作用,即使在某些情况下,也可以使用函数。
var save_user_input = prompt('what needs to be saved?');
//^ makes a variable of the prompt's answer
if (save_user_input == null) {
//^ if the answer is null, it is nothing
//however, if it is nothing, it is cancelled (as seen below). If it is "null" it is what the user said, then assigned to the variable(i think), but also null as in nothing in the prompt answer window, but ok pressed. So you cant do an or "null" (which would look like: if (save_user_input == null || "null") {)because (I also don't really know if this is right) the variable is "null". Very confusing
alert("cancelled");
//^ alerts the user the cancel button was pressed. No long explanation this time.
}
//^ is an end for the if (i got stumped as to why it wasn’t working and then realised this. very important to remember.)
else {
alert(save_user_input + " is what you said");
//^ alerts the user the variable and adds the string " is what you said" on the end
}
我发现这最适合我试试这个小提琴
document.getElementById("btnmyNumber").addEventListener("click", myFunctionVar);
function myFunctionVar() {
var numberr = parseInt(document.getElementById("myNumber").value, 10);
// alert(numberr);
if ( numberr > 1) {
document.getElementById("minusE5").style.display = "none";
}}
<form onsubmit="return false;">
<input class="button button3" type="number" id="myNumber" value="" min="0" max="30">
<input type="submit" id="btnmyNumber">
</form>
<!DOCTYPE html>
<html>
<body>
<p><input type="text" placeholder ="username" id="userinput">
<button id="demo">click me</button></p>
<script>
document.getElementById("demo").onclick = function(){
var user = document.getElementById("userinput").value;
alert(user);
}
</script>
</body>
</html>
点击我
<script>
document.getElementById("demo").onclick = function(){
var user = document.getElementById("userinput").value;
alert(user);
}
</script>
相关文章:
- 将函数的上下文应用于javascript变量
- 如何通过ajax刷新JSF填充的javascript变量
- Javascript变量赋值|
- 限制javascript变量的最小/最大整数
- 来自文本输入null的html javascript变量
- 访问jsrender模板中的全局javascript变量并更新它
- 从数据库中获取数据并插入JavaScript变量
- 如何将javascript变量传递到Meteor Spacebars模板中
- 将JavaScript变量保存到Rails模型
- 在if语句下的html中使用javascript变量
- Javascript变量分配-按类别
- 操作javascript变量[HTML]以只显示文本
- 无法比较javascript变量
- 如何将smarty变量与javascript变量进行比较
- 如何使用PHP将javascript变量添加到mysql数据库中
- Javascript 变量使用 jquery 查找变量
- 重新加载页面时Javascript变量发生变化
- 在asp classic中使用javascript变量
- 全局Javascript变量变为null
- 如何向服务器端提交javascript变量