JavaScript (eventlistner or something)

Question

我有一个简单的html，其中有一个输入框(id=input(和一个按钮(id=button(，其中"Show"作为按钮的文本。我已经编写了JavaScript来更改显示以隐藏点击和基本内容。

最初，没有显示任何按钮(因为按钮显示为无(。我想要的是，只要我在输入框中键入任何内容，就会显示"显示"按钮。如何在JavaScript中做到这一点？

这是我的JavaScript：-

let input = document.getElementById('input');
let btn = document.getElementById('button');
btn.addEventListener('click', () => {
if (btn.innerText === "SHOW") {
btn.innerText = "HIDE";
input.type = "text";
} else {
btn.innerText = "SHOW";
input.type = "password";
} 
})

Answer 1

下面的代码段根据输入中的数据显示和隐藏按钮

这也是你想要的活动https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

document.querySelector("#pass").addEventListener('input', 
(event) => 
{
if (document.querySelector("#pass").value.length === 0 ) {
document.querySelector("#btn").style.display = 'none';
} else {
document.querySelector("#btn").style.display = 'inline-block'; 
}

}
);

#btn { display: none; }

<input id="pass"> 
<button id="btn"> Show </button>

下面的代码应该可以帮助您解决所问的问题(即不会自动隐藏按钮(

document.querySelector("#pass").addEventListener('input', () => {
document.querySelector("#btn").style.display = 'inline-block';
});

#btn {
display: none;
}

<input id="pass">
<button id="btn"> Show </button>

Answer 2

如果我正确理解了您的问题，您应该在输入字段中添加一个changeeventlistener。这样，当输入字段发生变化时，您可以决定要做什么。

input.addEventListener("change", function(){
if (input.value !== ""){
// do something
} else {
do something else
}
} )

Answer 3

下面的片段是您所要求的工作模型👇

请尽量避免使用innerText、innerHTML或on*属性。

参考：

• https://www.digitalocean.com/community/tutorials/js-innertext-and-innerhtml
• 为什么在HTML中使用onClick((是一种糟糕的做法

let input = document.getElementById('dataEntry')
let displayButton = document.getElementById('btn')
document.addEventListener('input', () => {
if (input.value.length === 0) {
displayButton.style.display = 'none';
} else {
displayButton.style.display = 'inline-block';
}
})
displayButton.addEventListener('click', (event) => {
if (event.target.textContent.toLowerCase() === 'hide') {
input.type = 'password'
event.target.textContent = 'Show'
} else {
input.type = 'text'
event.target.textContent = 'Hide'
}
})

.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#btn {
display: none;
}

<div class='container'>
<input type='text' id='dataEntry' placeholder='Enter your password' required/>
<button id='btn'>Hide</button>
</div>