时间戳

首页 > 解决方案 > 使用 JavaScript 使用输入值隐藏和显示 div

javascript - 使用 JavaScript 使用输入值隐藏和显示 div

问题描述

有人帮助我使用下面的代码，我想使用 JavaScript 使用输入值隐藏和显示 div。

<html>
    
    <head>
    <script>
    function (){
      document.getElementById('ref3').value;
        if (value == 2) {
          document.getElementById('div').style.visibility = 'visible';
        } else {
          document.getElementById('div').style.visibility = 'hidden';  
        }
    }
    </script>
    </head>
    
    <body>
        <form name="myform">
            <div><input type="text" id="ref3" value=""></div>
            <div id="div" style="visibility:hidden">
                <label>Show me</label>
            </div>
        </form>
    </body>
    
    </html>

标签： javascript

解决方案

只需在文本框的事件上调用updateUI函数。blur您还可以使用onkeyup事件来立即反映更改。

HTML

<form name="myform">
        <div><input type="text" id="ref3" value="" onblur="updateUI()"></div>
        <div id="hotapp3" style="visibility:hidden">
            <label>Show me</label>
        </div>
</form>

JavaScript

function updateUI() {
    var value = document.getElementById('ref3').value;
    if (Number(value) == 2) {
        document.getElementById('hotapp3').style.visibility = 'visible';
    } else {
        document.getElementById('hotapp3').style.visibility = 'hidden';
    }
}

这是工作JSFiddle- https://jsfiddle.net/86yfgwk9/

推荐阅读