javascript 当输入值为空时显示元素,当输入值不为空时隐藏元素

ijnw1ujt  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(142)

我输入了一个段落位置绝对值到input元素。
我只想在输入值不为空时隐藏元素,在输入值为空时显示它。
这是我写的代码,但它不工作。我该怎么办?谢谢。

var x = document.getElementById("searchBtn").value;

document.getElementById("searchBtn").addEventListener("focus", myFunction3);

function myFunction3() {
  if (x == "") {
    document.querySelector(".mypara").style.visibility = "visible";
  } else {
    document.querySelector(".mypara").style.visibility = "hidden";
  }

}
<input id="searchBtn">
<div class="mypara">mypara</div>
v440hwme

v440hwme1#

你需要的是输入事件,而不是焦点。
并通过e.target.value得到值。

document.getElementById("searchBtn").addEventListener("input", myFunction3);

function myFunction3(e) {
  let x = e.target.value
  document.querySelector(".mypara").style.visibility = x === "" ? "visible" : "hidden";
}
<input id="searchBtn">
<div class="mypara">mypara</div>
46scxncf

46scxncf2#

只需将focus替换为keyup,这样它就可以检测到您的输入。还可以将x放入myFunction3中以获得更新的值。

document.getElementById("searchBtn").addEventListener("keyup", function(e) {
  var x = e.target.value;
  document.querySelector(".mypara").style.visibility = x == "" ? "visible" : "hidden";
});
<input id="searchBtn">
<div class="mypara">mypara</div>
zzlelutf

zzlelutf3#

在事件侦听器中声明x,以便每次更新变量:

document.getElementById("searchBtn").addEventListener("focus", myFunction3);

function myFunction3() {
  var x = document.getElementById("searchBtn").value;
  if (x == "") {
    document.querySelector(".mypara").style.visibility = "visible";
  } else {
    document.querySelector(".mypara").style.visibility = "hidden";
  }

}
<input id="searchBtn">
<div class="mypara">mypara</div>

相关问题