Hide and show a div using input value using JavaScript

Question

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>

Give your JavaScript function a name and call that in your input box. — Pankaj_Dwivedi
– Pankaj_Dwivedi, Commented Feb 15, 2020 at 19:20

Ankush Jain · Accepted Answer · 2020-02-15 19:15:50Z

1

Just call updateUI function on blur event of the textbox. You can also use onkeyup event to immediately reflect the change.

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';
    }
}

Here is working JSFiddle - https://jsfiddle.net/86yfgwk9/

answered Feb 15, 2020 at 19:15

Ankush Jain

7,2534 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Passionate Coder · Accepted Answer · 2020-02-15 19:42:04Z

0

Try this

1) Call a function when input value changes use onchange or blur any one event

2) set div id equal to hotapp3

Method 1

    <head>
    <script>
    function checkValue(){

      let value = document.getElementById('ref3').value;
        if (value == 2) {
          document.getElementById('hotapp3').style.visibility = 'visible';
        } else {
          document.getElementById('hotapp3').style.visibility = 'hidden';  
        }
    }
    </script>
    </head>

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

    </html>

Method 2

You can also do few changes pass input text value directly to function at the time of calling like this

onchange="test(this.value)

<input type="text" id="ref3" value="" onchange="test(this.value)">

and can use it directly in function

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

As commented by you if you want to do same for default value than call this function on page relode

window.onload = function() { checkValue(); };

edited Feb 15, 2020 at 19:42

answered Feb 15, 2020 at 19:17

Passionate Coder

7,3042 gold badges24 silver badges50 bronze badges

3 Comments

Reggie BC Over a year ago

Thank you Mamta, Say my input has a default value ="2", then how the js can read.

Passionate Coder Over a year ago

hi I have updated my answer just call same function on window load.

Passionate Coder Over a year ago

like this. window.onload = function() { checkValue(); };

ROOT · Accepted Answer · 2020-02-15 19:42:41Z

0

Few notes: you didn't name your handler function, you can just pick any name but remember it so that you can use it once you bind the event to you DOM element

Always move the script tag down because javascript will run before the HTML render and it will not attach or catch DOM element.

I just included the same HTML format so that you know how to run it locally, but other answers provided a better format.

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

edited Feb 15, 2020 at 19:42

answered Feb 15, 2020 at 19:28

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

2 Comments

Reggie BC Over a year ago

Thank you Othman, Say my input has a default value ="2", then how the js can read

ROOT Over a year ago

you can just invoke the handler function by calling inputChanged(); or on window.load event , I updated my answer.

Collectives™ on Stack Overflow

Hide and show a div using input value using JavaScript

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related