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

How to save user input into a variable in html and js

提问by Hamzah Malik

i am making a game and at the start it asks for your name. I want this name to be saved as varible. i have this html code:

我正在制作一个游戏，一开始它会询问你的名字。我希望将此名称保存为变量。我有这个 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>

and this is javascript part:

这是 javascript 部分：

function name()
{
var input = document.getElementById("userInput");
alert(input);
}

回答by PiLHA

It doesn't work because nameis a reserved word in JavaScript. Change the function name to something else.

它不起作用，因为它name是 JavaScript 中的保留字。将函数名称更改为其他名称。

See http://www.quackit.com/javascript/javascript_reserved_words.cfm

见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);
}

回答by NickersF

First, make your markup more portable/reusable. I also set the button's type to 'button'instead of using the onsubmitattribute. You can toggle the typeattribute to submitif the form needs to interact with a server.

首先，让你的标记更便携/可重用。我还将按钮的类型设置为'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>

Next write a general function for retrieving the username into a variable. It checks to make sure the variable holding the username has it least three characters in it. You can change this to whatever constant you want.

接下来编写一个通用函数，用于将用户名检索到变量中。它会检查以确保保存用户名的变量中至少包含三个字符。您可以将其更改为您想要的任何常量。

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

Next, I created an event listener for the button. It's generally considered the bad practice to have inline js calls.

接下来，我为按钮创建了一个事件侦听器。内联 js 调用通常被认为是不好的做法。

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

Here is a working and lightly styled demo:

这是一个有效且风格简洁的演示：

CodePen demo of this answer.

这个答案的 CodePen 演示。

回答by Amranur Rahman

Like I use on PHP and JavaScript:

就像我在 PHP 和 JavaScript 上使用的一样：

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

Update the JavaScript:

更新 JavaScript：

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

回答by Tom G

Change your javascript to:

将您的 javascript 更改为：

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

This will get the value that has been types into the text box, not a DOM object

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

回答by Joshua

I found this to work best for me https://jsfiddle.net/Lu92akv6/[I found this to work for me try this fiddle][1]

我发现这最适合我 https://jsfiddle.net/Lu92akv6/[我发现这对我有用，试试这个小提琴][1]

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>

回答by Bharat Singh Rajawat

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

---

---