JS输入值分配给变量-未定义

Question

I'm really fresh to JS Need some help because I don't understand a thing. 我真的对JS很JS需要一些帮助，因为我不了解任何事情。 If I try to assign the whole line to variable, I can use this variable later, but the outcome of that is blank or undefined, when I'm trying to log this to console, or either alert that using opera/chrome it's still the same, am I doing something wrong? 如果我尝试将整行分配给变量，则以后可以使用此变量，但是当我尝试将其记录到控制台时，其结果为空白或未定义，或者警告使用Opera / chrome仍然是同样，我做错什么了吗？

HTML 的HTML

<input type="text" id="name" placeholder="username">

JS JS

not working 不工作

var name = document.getElementById('name').value;

console.log(name);

can't do that either 也不能做到这一点

var name = document.getElementById('name');

console.log(name.value);

innerHTML not working innerHTML无法正常工作

I can do only that 我只能那样做

console.log(document.getElementById('name').value);

UPDATING THE CODE TO FULL EXAMPLE So I've changed the variable name to nameInp but it isn't working 将代码更新为完整示例因此，我已将变量名称更改为nameInp，但它不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <input type="text" id="name" placeholder="podaj imię">
    <input type="text" id="name2">
    <input type="text" id="name3">
    <!--
    <input type="password" id="password" placeholder="podaj hasło">
    <input type="password" id="confPassword" placeholder="powtórz hasło">
    -->
    <button id="submit" onclick="check();" value="wyślij">wyślij</button>

    <!--
    <p id="para"></p>
    -->   

    <div class="center"></div>
    <div class="center2"></div>


    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
</body>
</html>


var nameInp = document.getElementById('name').value;
var btn = document.getElementById('submit');


function check(){
    console.log(nameInp);
}

Answer 1

You can't see anything in the console because you're outputting the value of the input when the script is called so essentially on page load. 您在控制台中看不到任何内容，因为实际上是在页面加载时如此调用脚本时，您正在输出输入的值。 At this point the input box hasn't been filled yet. 至此，输入框尚未填写。 That's the console.log doesn't show anything. 那就是console.log没有显示任何内容。

You can, for example, run your function every time the user types inside the input box. 例如，您可以在用户每次在输入框中键入内容时运行函数。 For this you will need an event listener: 为此，您将需要一个事件侦听器：

Select the element you desire to 'watch' and call the addEventListener() method on it. 选择您要“监视”的元素，然后在其上调用addEventListener()方法。 It takes the event type and a callback function as parameters. 它以事件类型和回调函数为参数。

Lastly, in the callback function, we get the value of the input box by accessing the target of the event: e.target . 最后，在回调函数中，我们通过访问事件的目标e.target来获取输入框的值。 e being the event object and e.target the property target of the event. e是事件对象， e.target是事件的属性target 。

The code below will call a console.log() every time the user types in the input box: 每次用户在输入框中键入以下代码，就会调用console.log() ：

 document.querySelector('#username').addEventListener('keydown', function (e) { console.log(e.target.value); });

 <input type="text" id="username" placeholder="username">

Answer 2

Here's your code reduced to the relevant parts: 这是将您的代码简化为相关部分的代码：

 var nameInp = document.getElementById('name').value; function check() { console.log(nameInp); }

 <input type="text" id="name" placeholder="podaj imię"> <button id="submit" onclick="check();" value="wyślij">wyślij</button>

The problem is that var nameInp = document.getElementById('name').value; 问题是var nameInp = document.getElementById('name').value; is executed right when main.js is loaded (which happens as part of the whole page loading). 会在加载main.js时main.js执行（这是整个页面加载的一部分）。 At that point the input field has no value yet, so this is equivalent to var nameInp = ""; 此时，输入字段尚无值，因此等效于var nameInp = ""; . 。

Later, when the user clicks on the submit button, the check function runs, but nothing has changed the nameInp variable. 稍后，当用户单击“提交”按钮时， check功能将运行，但没有更改nameInp变量。 It still contains "" , so you get no output. 它仍然包含"" ，因此您没有输出。

Here's a clearer demonstration of the problem, where the initial value is not "" but "initial value" : 这是问题的更清楚的演示，其中初始值不是""而是"initial value" ：

 var nameInp = document.getElementById('name').value; function check() { console.log(nameInp); }

 <input type="text" id="name" placeholder="podaj imię" value="initial value"> <button id="submit" onclick="check();" value="wyślij">wyślij</button>

Every time you click on wyślij , initial value is printed because that's what nameInp was initially set to. 每次单击wyślij ，都会打印initial value ，因为那是nameInp最初设置的。

Fix: 固定：

 var nameInp = document.getElementById('name'); function check() { console.log(nameInp.value); }

 <input type="text" id="name" placeholder="podaj imię"> <button id="submit" onclick="check();" value="wyślij">wyślij</button>

Here we only retrieve the .value of the input field at the time check() is run, ie when the button is clicked. 在这里，我们仅在运行check()时check()即单击按钮时check()检索输入字段的.value 。

Answer 3

I have made a script for all three cases, use it according to your need. 我为这三种情况制作了脚本，请根据您的需要使用。

 <html> <head> <script> function Consolify() { var firstMethod = document.getElementById('name').value; console.log('firstMethod = ', firstMethod); var secondMethod = document.getElementById('name'); console.log('secondMethod = ', secondMethod.value); console.log('thirdMethod = ', document.getElementById('name').value); } </script> </head> <body> <input type="text" id="name" placeholder="username"> <button onclick="Consolify()">Consolify</button> </body> </html>

JS输入值分配给变量-未定义

问题描述

3 个解决方案

解决方案1
0 2018-06-01 12:04:29

解决方案2
0 已采纳 2018-06-01 12:08:31

解决方案3
-1 2018-06-01 11:55:18

JS输入值分配给变量-未定义

问题描述

3 个解决方案

解决方案1 0 2018-06-01 12:04:29

解决方案2 0 已采纳 2018-06-01 12:08:31

解决方案3 -1 2018-06-01 11:55:18

解决方案1
0 2018-06-01 12:04:29

解决方案2
0 已采纳 2018-06-01 12:08:31

解决方案3
-1 2018-06-01 11:55:18