Hide and show a div using input value using JavaScript

Ask Time：2020-02-16T03:08:09 Author：Reggie BC

Someone help me with the below code I want to hide and show a div using input value using JavaScript.

<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>

Author:Reggie BC，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/60242203/hide-and-show-a-div-using-input-value-using-javascript

Ankush Jain :

Just call updateUI function on blur event of the textbox. You can also use onkeyup event to immediately reflect the change.\n\nHTML\n\n<form name=\"myform\">\n <div><input type=\"text\" id=\"ref3\" value=\"\" onblur=\"updateUI()\"></div>\n <div id=\"hotapp3\" style=\"visibility:hidden\">\n <label>Show me</label>\n </div>\n</form>\n\n\nJavaScript\n\nfunction updateUI() {\n var value = document.getElementById('ref3').value;\n if (Number(value) == 2) {\n document.getElementById('hotapp3').style.visibility = 'visible';\n } else {\n document.getElementById('hotapp3').style.visibility = 'hidden';\n }\n}\n\n\nHere is working JSFiddle - https://jsfiddle.net/86yfgwk9/",

2020-02-15T19:15:50

Passionate Coder :

Try this\n\n1) Call a function when input value changes use onchange or blur any one event\n\n2) set div id equal to hotapp3\n\nMethod 1\n \n\n <head>\n <script>\n function checkValue(){\n\n let value = document.getElementById('ref3').value;\n if (value == 2) {\n document.getElementById('hotapp3').style.visibility = 'visible';\n } else {\n document.getElementById('hotapp3').style.visibility = 'hidden'; \n }\n }\n </script>\n </head>\n\n <body>\n <form name=\"myform\">\n <div><input type=\"text\" id=\"ref3\" value=\"\" onchange=\"checkValue()\"></div>\n <div id=\"hotapp3\" style=\"visibility:hidden\">\n <label>Show me</label>\n </div>\n </form>\n </body>\n\n </html>\n\n\nMethod 2\n\nYou can also do few changes pass input text value directly to function at the time of calling like this\n\nonchange=\"test(this.value)\n\n<input type=\"text\" id=\"ref3\" value=\"\" onchange=\"test(this.value)\">\n\n\nand can use it directly in function\n\nfunction test(value){\n if (value == 2) {\n document.getElementById('hotapp3').style.visibility = 'visible';\n } else {\n document.getElementById('hotapp3').style.visibility = 'hidden'; \n }\n }\n\n\nAs commented by you if you want to do same for default value than call this function on page relode\n\nwindow.onload = function() {\n checkValue();\n};",

2020-02-15T19:17:04

Hide and show a div using input value using JavaScript