Question

我真的很新鲜JS 需要一些帮助，因为我不明白一件事。如果我尝试将整行分配给变量，我可以稍后使用此变量，但是当我尝试将此日志记录到控制台时，结果是空白或未定义，或者警告使用opera / chrome它仍然是一样的，我做错了吗？

HTML

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

JS

不工作

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

console.log(name);

无法做到这一点

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

console.log(name.value);

innerHTML无法正常工作

我只能这样做

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

将代码更新为完整示例 所以我已经将变量名称更改为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

您无法在控制台中看到任何内容，因为您在调用脚本时输出的输入值基本上是在页面加载时输出的。此时输入框尚未填充。这是console.log没有显示任何内容。

例如，每次用户在输入框内输入时，您都可以运行您的功能。为此，您需要一个事件监听器：

选择您想要“观看”的元素并在其上调用addEventListener()方法。它将事件类型和回调函数作为参数。

最后，在回调函数中，我们通过访问事件的目标来获取输入框的值：e.target。 e是事件对象，e.target是事件的属性target。

每次用户在输入框中输入时，下面的代码都会调用console.log()：

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

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

Answer 2

此处您的代码已缩减为相关部分：

＆＃13;

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

＆＃13;

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

＆＃13;

问题是var nameInp = document.getElementById('name').value;在加载main.js时正确执行（这是整个页面加载的一部分）。此时输入字段还没有值，因此这相当于var nameInp = "";。

稍后，当用户单击提交按钮时，check函数会运行，但没有任何内容更改nameInp变量。它仍然包含""，因此您没有输出。

此处更清楚地展示了问题，其中初始值不是""，而是"initial value"：

＆＃13;

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

＆＃13;

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

＆＃13;

每次点击wyślij时，都会打印initial value，因为nameInp最初设置为{。}}。

修正：

＆＃13;

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

＆＃13;

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

＆＃13;

此处我们只检索运行.value时输入字段的check()，即点击按钮时。

Answer 3

我为这三种情况编写了一个脚本，根据您的需要使用它。

＆＃13;

remote_syslog

＆＃13;

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

3 个答案: