style.display == “none” Not Working Properly

Question

I am working on a project where I need certain elements to be hidden with the click of a button. To do this, I am using style.display = "none", which should hide the elements and NOT take up any space. For some reason, even though it hides the elements, they still take up scape - there are random spaces in the page. Here is what it looks like:

Before the elements are hidden | After the elements are hidden

Note: The grey block is my cursor highlighting the empty space

Here is the related code:

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>

All the other element is pushed down, but I do not want that. How should I change it? I think this has to do with the
tags not being hidden, how should I hide them?

Answer 1

Putting aside the non-semantic use of line breaks, you're having an issue because your code sets the input fields to display: none, but not the line breaks separating them. Your best bet would probably be to wrap all the input fields in a single container tag, like so:

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

Then, you could hide the whole section using the following JavaScript:

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

This will get rid of the spacing, and also means you don't have to manually hide every input element.