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

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/

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

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

Thank you Mamta, Say my input has a default value ="2", then how the js can read.
hi I have updated my answer just call same function on window load.

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

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>

Thank you Othman, Say my input has a default value ="2", then how the js can read
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

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Related