如果文本字段值设置为特定值，则显示隐藏的 div

Question

我希望这里有人能够帮助我。如果文本字段设置为值，我想显示隐藏的 div 标签。

我尝试自己解决这个问题，但没有成功，你能帮我吗？

提前致谢！

<script type="text/javascript">

                    if(document.getElementById("art").value == "test"){

                    document.getElementById("divDetails").style.display='block';

                    }

                    </script>

<input type="text" name="art" id="art" value="" class="form-control" style="height: 3em; font-size: 9px;"> 

<div style="display: none" id="divDetails">Here is the hidden text</div>

Answer 1

您所拥有的内容只会在执行时运行一次，您需要检查输入何时更改。document.getElementById("art").addEventListener("input",()=>{&nbsp; &nbsp; if(document.getElementById("art").value == "test"){&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("divDetails").style.display='block';&nbsp; &nbsp; }})

Answer 2

您的解决方案有两个问题。首先，您在渲染 HTML 之前运行 JavaScript 代码，从而在演示中产生错误。其次，您只执行一次 JavaScript 验证，而实际上您应该始终在输入值更改时运行它。试试这个：<input&nbsp; type="text"&nbsp; name="art"&nbsp; id="art"&nbsp; value=""&nbsp; class="form-control"&nbsp; style="height: 3em; font-size: 9px;"&nbsp; oninput="checkDetailsVisibility()">&nbsp;<div&nbsp; style="display: none"&nbsp; id="divDetails">Here is the hidden text</div><script type="text/javascript">&nbsp; function checkDetailsVisibility() {&nbsp; &nbsp; if(document.getElementById("art").value == "test"){&nbsp; &nbsp; &nbsp; document.getElementById("divDetails").style.display='block';&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; document.getElementById("divDetails").style.display='none';&nbsp; &nbsp; }&nbsp; }</script>每次输入值发生变化时，checkDetailsVisibility都会执行该函数并显示或隐藏所需的 div。