使用 JavaScript 使用输入值隐藏和显示 div
[英]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.
有人帮助我使用以下代码，我想使用 JavaScript 使用输入值隐藏和显示 div。
<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 个解决方案
解决方案1
1 2020-02-15 19:15:50
Just call updateUI function on blur event of the textbox.只需在文本框的blur事件上调用updateUI函数即可。 You can also use onkeyup event to immediately reflect the change.您还可以使用onkeyup事件立即反映更改。
HTML 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 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/这是工作JSFiddle - https://jsfiddle.net/86yfgwk9/
解决方案2
0 2020-02-15 19:17:04
Try this尝试这个
1) Call a function when input value changes use onchange or blur any one event 1) 当输入值改变时调用函数使用onchange或blur任何一个事件
2) set div id equal to hotapp3 2) 设置 div id 等于 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) 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(); window.onload = function() { checkValue(); }; };
解决方案3
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一些注意事项：您没有命名您的处理程序函数，您可以选择任何名称但记住它，以便在将事件绑定到您的 DOM 元素后可以使用它
Always move the script tag down because javascript will run before the HTML render and it will not attach or catch DOM element.始终将脚本标记向下移动，因为 javascript 将在 HTML 渲染之前运行，并且不会附加或捕获 DOM 元素。
I just included the same HTML format so that you know how to run it locally, but other answers provided a better format.我只是包含了相同的 HTML 格式，以便您知道如何在本地运行它，但其他答案提供了更好的格式。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.