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>
3 answers
solution1
1 2020-02-15 19:15:50
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/
solution2
0 2020-02-15 19:17:04
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(); };
solution3
0 2020-02-15 19:28:30
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.