[英]style.display == “none” Not Working Properly
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.为此,我使用 style.display = "none",它应该隐藏元素并且不占用任何空间。 For some reason, even though it hides the elements, they still take up scape - there are random spaces in the page.出于某种原因,即使它隐藏了元素,它们仍然占据了 scape - 页面中有随机空间。 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注意:灰色块是我的 cursor 突出显示空白
Here is the related code:以下是相关代码:
Javascript - 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 - 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?标签没有被隐藏,我应该如何隐藏它们?
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.撇开换行符的非语义使用不谈,您遇到了一个问题,因为您的代码将输入字段设置为display: none
,而不是分隔它们的换行符。 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:然后,您可以使用以下 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.这将消除间距,也意味着您不必手动隐藏每个输入元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.