CODEWITHSUNDEEP
javascript
Reggie BC
Reggie BC

Reputation: 25

Hide and show a div using input value using JavaScript

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>

Upvotes: 0

Views: 412

Answers (3)

ROOT
ROOT

Reputation: 11622

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>

Upvotes: 0

Passionate Coder
Passionate Coder

Reputation: 7294

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(); };

Upvotes: 0

Ankush Jain
Ankush Jain

Reputation: 7079

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/

Upvotes: 1

Related Questions