时间戳

首页 > 解决方案 > 无法获取输入元素的值

javascript - 无法获取输入元素的值

问题描述

我正在尝试格式化输入字段中的值，但我无法获取值

以下是 HTML：

<div class="container">
    <input type="text" id="search" />
    <button id="btn" onclick="search()">Search</button>
</div>

这是JS代码：

var searchValue = document.querySelector('#search').value;

function search() {
    console.log(searchValue);
}

运行该代码会记录空值，但如果我从 querySelector 行中删除 .value 并将其用作

console.log(searchValue.value);

然后它工作

这里有什么问题！？

标签： javascripthtml

解决方案

这是正常的，您将变量设置在单击时调用searchValue的函数之外。search()

在单击时调用的函数中设置变量。

如果您立即获得价值，它没有价值，那是正常的，您没有价值。

因此，如果您在点击功能之外获得价值，您将不会拥有它。您必须在拥有值的那一刻使用 .value。

function search() {
    var searchValue = document.getElementById('search').value;
    console.log(searchValue);
}
<div class="container">
    <input type="text" id="search" />
    <button id="btn" onclick="search()">Search</button>
</div>

如您所见，我们可以读取该值，因为在我要求的时候它有一个。点击后，您在上面设置了“理论上”的值。

var searchValue = document.getElementById('search').value;
console.log(searchValue);

function search() {
    console.log(searchValue);
}
<div class="container">
    <input type="text" id="search" value="TEST"/>
    <button id="btn"  onclick="search()">Search</button>
</div>

推荐阅读