无法获取输入元素的值

Question

我试图格式化输入字段中的值，但无法获得值

以下是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)；

然后它工作

这里有什么问题！？

Answer 1

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

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

如果你在某个时刻得到了值，它没有值，那么你没有值是正常的。

所以，如果你在点击函数之外获得值，你就没有它了。你必须在有值的时候使用.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>

Answer 2

加载页面时，只更新searchValue一次。此时，您的文本字段仍然不包含加载到searchValue中的任何内容(严格来说是空字符串(。

我假设您想在每次单击按钮时加载它，所以您需要在search中执行此操作，如示例中所示。

function search() {
//Load the value from the text field each time we need it
let searchValue = document.getElementById("search").value;
//Log the value in console
console.log(searchValue);
}

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

Answer 3

这应该有效：

function find()
{
serchValue = document.getElementById("search").value;
console.log(searchValue);
}