使用javascript條件隱藏元素

在這段代碼中，我有兩個元素;一個id爲'alpha'的輸入框和一個id爲'bravo'的段落。我想要做的是在輸入框中沒有任何東西時讓bravo隱形。使用javascript條件隱藏元素

這是我到目前爲止有：

<html> 
    <head> 
     <script> 
      var a = document.getElementById("alpha"); 
      var b = document.getElementById("bravo"); 
      window.onload = function hidebravo() { 
       if (a.value == nil) {b.style.visibility = "hidden";} 
       } 
      a.onchange = function hidebravo() { 
       if (a.value == nil) {b.style.visibility = "hidden";} 
       } 
     </script> 
    </head> 
    <body> 
     <input id="alpha"/> 
     <p id="bravo">Hello!</p> 
    </body> 
</html>

爲了清楚起見，我已經設置了變量「A」和「B」對應於JS選擇的輸入框和段落，分別。

現在，一旦被裝入窗口我調用函數「hidebravo（）」，它是構成不可見喝彩如果輸入框alpha是空的功能。如果用戶更改了alpha的值，則我會調用相同的函數，以防alpha中包含用戶隨後刪除的值，並再次變爲空。

但是，無論出於何種原因，這是不正常的，我不明白爲什麼。

請幫忙！

來源

2016-07-03 J.Brooker

您應該在Javascript中使用null而不是nil。

下面是工作的代碼，而無需在window.onload功能：

JS：

function reloadBravo() { 
    var bravoParagraph = document.getElementById('bravo'); 
    var alphaTextBox = document.getElementById('alpha'); 
    var alphaText = alphaTextBox.value; 

    if (alphaText.length > 0) { 
    bravoParagraph.innerHTML = alphaText; 
    bravoParagraph.style.visibility = 'visible'; 
    } else { 
    bravoParagraph.innerHTML = ''; 
    bravoParagraph.style.visibility = 'hidden'; 
    } 

}

HTML：

<html> 
<head> 
</head> 
<body> 
    <input id="alpha" onkeyup="reloadBravo()"/> 
    <p id="bravo"></p> 
</body> 
</html>

來源

2016-07-03 22:12:45 pzelenovic

感謝您的回答，我現在使用length屬性相反，它完美的作品。 –

歡迎您:)請將答案標記爲已接受。 – pzelenovic

這可以幫助您：

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <input id="alpha"/> 
 
     <p id="bravo">Hello!</p> 
 
     <script> 
 
      var a = document.getElementById("alpha"); 
 
      var b = document.getElementById("bravo"); 
 
      window.onload = function hidebravo() { 
 
       if (a.value == "") 
 
        b.style.visibility = "hidden"; 
 
       else 
 
        b.style.visibility = "visible"; 
 
        
 
       } 
 
      a.oninput = function hidebravo() { 
 
       if (a.value == "") 
 
        b.style.visibility = "hidden"; 
 
       else 
 
        b.style.visibility = "visible"; 
 
        
 
       } 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-07-03 22:06:28 Ehsan

JavaScript沒有特殊nil值。有null。但HTMLInputElement的.value屬性爲DOMString，不能爲null。您需要檢查DOMString的.length財產。 0的length表示沒有設置value。

if (a.value.length === 0) { ... }

注意，作爲一個空間和標籤被認爲是一種性格，你需要修剪值檢查用戶是否已經輸入的任何可見的字符或不：

if (a.value.trim().length === 0) { ... }

但是，這不是唯一的問題。 load事件被觸發一次，您的代碼不檢查輸入的當前值。您應該爲輸入元素觸發的事件處理程序爲keyup/input/change/paste/...事件觸發。

a.addEventListener('keyup', hidebravo);  
b.addEventListener('keyup', hidebravo);

來源

2016-07-03 22:08:13 undefined

使用javascript條件隱藏元素

回答

相關問題