英文:
Display an element when input value is empty and hide it when input value is not empty
问题
我创建了一个带有绝对定位的段落的输入框。
当输入值为空时，我只想隐藏该元素，当输入值不为空时显示它。
这是我编写的代码，但它不起作用。请问我该怎么办。谢谢。
<input id="searchBtn">
<div class="mypara">mypara</div>
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";
}
}
英文:
I made an input with a paragraph position absolute to the input element.
I just want to hide the element when the input value is not empty and display it when the input value is empty.
This is the code I wrote but it's not working. What should I do please. Thanks.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
<!-- language: lang-html -->
<input id="searchBtn">
<div class="mypara">mypara</div>
<!-- end snippet -->
答案1
得分: 2
你需要输入事件，而不是焦点。
并通过 e.target.value 获取值。
<input id="searchBtn">
<div class="mypara">mypara</div>
document.getElementById("searchBtn").addEventListener("input", myFunction3);
function myFunction3(e) {
let x = e.target.value
document.querySelector(".mypara").style.visibility = x === "" ? "visible" : "hidden";
}
英文:
You need input event, not focus.
And get value by e.target.value.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("searchBtn").addEventListener("input", myFunction3);
function myFunction3(e) {
let x = e.target.value
document.querySelector(".mypara").style.visibility = x === "" ? "visible" : "hidden";
}
<!-- language: lang-html -->
<input id="searchBtn">
<div class="mypara">mypara</div>
<!-- end snippet -->
答案2
得分: 0
Just replace focus with keyup so it will always detect when you type. Also put x inside myFunction3 to get an updated value.
替换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>
英文:
Just replace focus with keyup so it will always detect when you type. Also put x inside myFunction3 to get an updated value.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("searchBtn").addEventListener("keyup", function(e) {
var x = e.target.value;
document.querySelector(".mypara").style.visibility = x == "" ? "visible" : "hidden";
});
<!-- language: lang-html -->
<input id="searchBtn">
<div class="mypara">mypara</div>
<!-- end snippet -->
答案3
得分: -1
在事件监听器内部声明 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>
英文:
Declare x inside of the event listener to update the variable each time:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
<!-- language: lang-html -->
<input id="searchBtn">
<div class="mypara">mypara</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论