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

Question

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

在元素被隐藏之前| 元素隐藏后

注意：灰色块是我的 cursor 突出显示空白

以下是相关代码：

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

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