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