Element is not hiding when I use style.display in Javascript
Question
The function doesn't work, and does not hide the paragraph element. How to fix this?
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text=document.getElementById('paragraph');
if (text.style.display == 'block'){
text.style.display = 'none';
}
if (text.style.display == 'none'){
text.style.display = 'block';
}
}
</script>
</body>
</html>
5 answers
solution1
3 2021-06-24 07:37:26
At Page Load the Display style is empty also you are immediately checking again with an if statement, use else if or simply else if there is nothing else to check
function changeText(){ let text=document.querySelector('#paragraph'); if (text.style.display === 'block' || text.style.display === ""){ text.style.display = 'none'; } else if (text.style.display == 'none'){ text.style.display = 'block'; } } <p id="paragraph">Toggle Text</p> <button class="buttonChange" onclick="changeText()">Change Text</button>
solution2
2 2021-06-24 07:36:23
Use below code. your code has 2 issues
1st - You need to check for text.style.display == ''. 2nd - The 2 if block make it always visible as 1st if will hide then 2nd if will check if hidden then it will show. Use else instead of 2nf if.
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text=document.getElementById('paragraph');
if (text.style.display == 'block' || text.style.display == ''){
text.style.display = 'none';
}else{
text.style.display = 'block';
}
}
</script>
</body>
</html>
solution3
2 ACCPTED 2021-06-24 07:54:58
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button onclick="changeText()">Change Text</button>
<script>
const text = document.getElementById('paragraph');
function changeText() {
if (text.style.display == 'block') {
text.style.display = 'none';
} else {
text.style.display = 'block';
}
}
</script>
</body>
</html>
Use if else to choose one condition only
solution4
1 2021-06-24 07:38:49
because you havent set the display of the p element
if you console.log the style of the p element, the display of the element is not block , it is blank ""
<p id="paragraph">Toggle Text</p> <button class="buttonChange" onclick="changeText()">Change Text</button> <script> function changeText(){ let text = document.getElementById('paragraph'); console.log(text.style); } </script>
so you have to change it to if (text.style.display === '')
<html> <head> </head> <body> <p id="paragraph">Toggle Text</p> <button class="buttonChange" onclick="changeText()">Change Text</button> <script> function changeText(){ let text = document.getElementById('paragraph'); if (text.style.display === '' || text.style.display === "block"){ text.style.display = 'none'; }else if (text.style.display === 'none'){ text.style.display = 'block'; } } </script> </body> </html>
solution5
0 2021-06-24 07:54:51
According to the previous answers your code has 2 issues as mentioned.
Rather than using || text.style.display == "" || text.style.display == "" condition as suggested, you can always create your paragraph tag with style like below.
<p style="display:block" id="paragraph">Toggle Text</p>
You can choose the solution as you wish either with the OR condition or with the style attribute in P tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.