如何在HTML和JavaScript中将用户输入保存到变量中

nnt7mjpx 于 2022-11-20 发布在 Java

关注(0)|答案(8)|浏览(256)

我正在做一个游戏，并在开始时要求你的名字，我希望这个名字被保存为变量。
下面是我的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);
}

Html

来源：https://stackoverflow.com/questions/17433557/how-to-save-user-input-into-a-variable-in-html-and-javascript

8条答案

按热度按时间

wrrgggsh1#

因为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);
}

赞(0）回复(0）举报 2022-11-20

ax6ht2ek2#

首先，让您的标记更具可移植性/可重用性。我还将按钮的类型设置为'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 demo of this answer.

赞(0）回复(0）举报 2022-11-20

x33g5p2x3#

将您的javascript更改为：

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

这将获取在文本框中键入的值，而不是DOM对象

赞(0）回复(0）举报 2022-11-20

3htmauhk4#

您可以同时使用PHP和JavaScript：

<input type="hidden" id="CatId" value="<?php echo $categoryId; ?>">

现在更新JavaScript：

var categoryId = document.getElementById('CatId').value;

赞(0）回复(0）举报 2022-11-20

8wigbo565#

<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>

赞(0）回复(0）举报 2022-11-20

hs1ihplo6#

我的意思是，如果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
}

赞(0）回复(0）举报 2022-11-20

0vvn1miw7#

我发现这个最适合我try this fiddle
第一个

赞(0）回复(0）举报 2022-11-20

exdqitrt8#

<!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>

赞(0）回复(0）举报 2022-11-20

我来回答

如何在HTML和JavaScript中将用户输入保存到变量中

8条答案

相关问题

热门标签

最新问答