style.display == “none” 无法正常工作

Question

我正在做一个项目，我需要通过单击按钮来隐藏某些元素。为此，我使用 style.display = "none"，它应该隐藏元素而不占用任何 space。出于某种原因，即使它隐藏了元素，它们仍然占据了 scape - 页面中有随机的 spaces。这是它的样子：

Before the elements are hidden | After the elements are hidden

注意：灰色块是我的光标突出显示空 space

相关代码如下：

Javascript -

function start() {

  tempPlayer1 = document.getElementById("enterName1").value;
  tempPlayer2 = document.getElementById("enterName2").value;
  tempPlayer3 = document.getElementById("enterName3").value;
    
  player.push(tempPlayer1);
  player.push(tempPlayer2);
  player.push(tempPlayer3);

  if (tempPlayer1 == "" || tempPlayer2 == "" || tempPlayer3 == "") {

    document.getElementById("op0").innerHTML = "Please enter a valid name.";
        return;

  } else {
    
        console.log("The first player's name is " + player[1] + ".");
        console.log("The second player's name is " + player[2] + ".");
        console.log("The third player's name is " + player[3] + ".");
        document.getElementById("op0").innerHTML = "op0";
    
  }

  startButton.style.display = "none";
  enterName1.style.display = "none";
  enterName2.style.display = "none";
  enterName3.style.display = "none";
  instructions.style.display = "block";

}

HTML -

<br>
<br>
<br>

<titl id = title style = "text-align:center;">

      

</titl>

<br>
<br>
<br>

<input type = "text" id = "enterName1" value = "" placeholder = "Enter Player 1 name here...">
 
<br>
<br>
    
<input type = "text" id = "enterName2" value = "" placeholder = "Enter Player 2 name here...">
    
<br>
<br>

<input type = "text" id = "enterName3" value = "" placeholder = "Enter Player 3 name here...">
    
<br>
<br>
<br>
    
<button onclick = "start()" id = "startButton" style = "text-align:center;">

       

 </button>
 
<br>
<br>

所有其他元素都被向下推，但我不希望那样。我应该如何更改它？我认为这与
标签没有被隐藏有关，我应该如何隐藏它们？

Answer 1

撇开换行符的非语义使用不谈，您遇到了一个问题，因为您的代码将输入字段设置为 display: none，而不是分隔它们的换行符。您最好的选择可能是将所有输入字段包装在一个容器标签中，如下所示：

<section id="input">
    <input type = "text" id = "enterName1" value = "" placeholder = "Enter Player 1 name here...">
 
    <br>
    <br>
    
    <input type = "text" id = "enterName2" value = "" placeholder = "Enter Player 2 name here...">
    
    <br>
    <br>

    <input type = "text" id = "enterName3" value = "" placeholder = "Enter Player 3 name here...">
    
    <br>
    <br>
    <br>
    
    <button onclick = "start()" id = "startButton" style = "text-align:center;">Click here to start</button>
</section>

然后，您可以使用以下 JavaScript:

隐藏整个部分

let input = document.getElementById('input');
// ...
input.style.display = 'none';

这将消除间距，也意味着您不必手动隐藏每个输入元素。

style.display == “none” 无法正常工作

style.display == “none” Not Working Properly

javascript

html

css

hide