javascript - 输入不为空时显示按钮 |不工作JS

Question

我想要一个带有文字“Go!”的按钮当用户输入内容时显示在我的 html 输入旁边。如果输入为空，则不得看到该按钮。我正在使用 Javascript 尝试执行此操作，但它似乎不起作用，我做错了什么？

var b = document.getElementById('button');

var input = document.getElementById("inputtext");
if(input.value === ""){
 alert("Input a value to continue");
 b.style.display = "none";
}else{
 b.style.display = "inline-block";
}

<input type="text" id="inputtext" placeholder="Enter name">
<button id="button">GO!
</button>

Answer 1

为了在 JS 中实现此功能，您可以使用输入监听器:

var b = document.getElementById('button');
var input = document.getElementById("inputtext");
b.style.display = "none";

if(input.value === ""){
 alert("Input a value to continue");
}
 
input.addEventListener('input', function() {

if(input.value === ""){
 alert("Input a value to continue");
 b.style.display = "none";
}
else{

  b.style.display = "inline-block";
 }
});

<input type="text" id="inputtext" placeholder="Enter name">
<button id="button">GO!
</button>

使用 CSS 的另一个解决方案是:-

#inputtext:placeholder-shown ~ button{
 display:none;
}

<input type="text" id="inputtext" placeholder="Enter name">
<button id="button">GO!
</button>