使用 JavaScript 使用输入值隐藏和显示 div

Question

有人帮助我使用以下代码，我想使用 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>

Answer 1

只需在文本框的blur事件上调用updateUI函数即可。 您还可以使用onkeyup事件立即反映更改。

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

这是工作JSFiddle - https://jsfiddle.net/86yfgwk9/

Answer 2

尝试这个

1) 当输入值改变时调用函数使用onchange或blur任何一个事件

2) 设置 div id 等于 hotapp3

方法一

    <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>

方法二

您还可以做一些更改，在调用时将输入文本值直接传递给函数

onchange="test(this.value)

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

并且可以直接在函数中使用

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

正如您所评论的，如果您想对默认值执行相同的操作而不是在页面重新加载时调用此函数

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

Answer 3

一些注意事项：您没有命名您的处理程序函数，您可以选择任何名称但记住它，以便在将事件绑定到您的 DOM 元素后可以使用它

始终将脚本标记向下移动，因为 javascript 将在 HTML 渲染之前运行，并且不会附加或捕获 DOM 元素。

我只是包含了相同的 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>

使用 JavaScript 使用输入值隐藏和显示 div

问题描述

3 个解决方案

解决方案1
1 2020-02-15 19:15:50

解决方案2
0 2020-02-15 19:17:04

解决方案3
0 2020-02-15 19:28:30

使用 JavaScript 使用输入值隐藏和显示 div

问题描述

3 个解决方案

解决方案1 1 2020-02-15 19:15:50

解决方案2 0 2020-02-15 19:17:04

解决方案3 0 2020-02-15 19:28:30

解决方案1
1 2020-02-15 19:15:50

解决方案2
0 2020-02-15 19:17:04

解决方案3
0 2020-02-15 19:28:30