如果文本字段值设置为特定值，则显示隐藏的 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",()=>{

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

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

    }

})

Answer 2

您的解决方案有两个问题。

首先，您在渲染 HTML 之前运行 JavaScript 代码，从而在演示中产生错误。

其次，您只执行一次 JavaScript 验证，而实际上您应该始终在输入值更改时运行它。

试试这个：

<input

  type="text"

  name="art"

  id="art"

  value=""

  class="form-control"

  style="height: 3em; font-size: 9px;"

  oninput="checkDetailsVisibility()"> 

<div

  style="display: none"

  id="divDetails">Here is the hidden text</div>

<script type="text/javascript">

  function checkDetailsVisibility() {

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

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

    }

    else {

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

    }

  }

</script>

每次输入值发生变化时，checkDetailsVisibility都会执行该函数并显示或隐藏所需的 div。