Question

在这段代码中，我有两个元素;一个id为＆＃39; alpha＆＃39;的输入框。还有一段id为＃bravo＆＃39;的段落。我想要做的是当输入框alpha中没有任何内容时，使bravo不可见。

这是我到目前为止所做的：

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

为了清楚起见，我设置了变量＆＃39; a＆＃39;和＆＃39; b＆＃39;分别对应输入框和段落的JS选择器。

现在，只要加载窗口，我就会调用函数＆＃39; hidebravo（）＆＃39;这是使bravo不可见的功能如果输入框alpha为空。每当用户更改alpha的值时，我都会调用相同的函数，以防alpha包含一个用户然后删除的值，并再次变为空。

但是，无论出于何种原因，这都不能正常工作，我无法弄清楚原因。

请帮忙！

Answer 1

这有助于您：

＆＃13;

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

＆＃13;

Answer 2

JavaScript没有特殊的nil值。有null。但.value的{{1}}属性为HTMLInputElement且无法DOMString。您需要检查null的{{1}}属性。 .length DOMString表示没有设置length。

请注意，由于空格和制表符被视为字符，因此您需要修剪该值以检查用户是否键入了任何可见字符：

value

但这不是唯一的问题。 if (a.value.length === 0) { ... }事件被触发一次，您的代码不会检查输入的当前值。您应该为针对输入元素触发的if (a.value.trim().length === 0) { ... } / load / keyup / input / ...事件添加事件处理程序。

change

Answer 3

你应该在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>

使用javascript条件隐藏元素

3 个答案: