Why doesn't this code display the button after I hide it?

Question

When I run this JavaScript code, button2 doesn't get displayed again. I'm not sure why this is happening. I am trying to use this in a game I am creating. I searched this up on Google multiple times and couldn't find an answer.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2"></button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.style.display = "auto";
        }
    </script>
</html>

pilchard · Answer 1 · 2020-08-22T23:45:15.990

A good way to handle this and provide more reusable code is to use <element>.classList.remove() and <element>.classList.add() to set or unset a hidden class. This can also be useful for toggling with <element>.classList.toggle().

This has the added advantage of being able to set your default display style in the CSS rather than burying it in the javascript.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                /* allows setting preferred display in CSS */
                display: block; 
            }
            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn1" onclick="toggleBtn2()">
            Toggle Button 2
        </button>
        <button class="btn2 hidden" id="btn2">Button 2</button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.classList.remove("hidden");
        }
        function toggleBtn2() {
            btn2.classList.toggle("hidden");
        }
    </script>
</html>

tarkh · Answer 2 · 2020-08-22T23:27:31.257

Maybe btn2.style.display = "block";?
Or, as @charlietfl added, btn2.style.display = "inline"; since that is what browser default is for a button

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

.btn1 {
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
}
.btn2 {
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2">new button here</button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.style.display = "block";
        }
    </script>
</html>

Or 'inline' since that is what browser default is for a button — charlietfl, Aug 22 '20 at 23:24

score 0 · Answer 3 · answered Aug 22 '20 at 23:29

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2">Button 2</button>
        <script type="text/javascript">
        const btn2 = document.getElementById("btn2");
        function showBtn2() {
            btn2.style.display = "inline";
        }
    </script>
    </body>
</html>

Use display = inline or block instead of auto.

Add some text content to button 2 like this: <button class="btn2" id="btn2">Button 2</button>

score 0 · Answer 4 · answered Aug 22 '20 at 23:37

0

CSS: "display: auto;"?

display does not have an auto attribute. you can try "inline" or "block".

'''
function showBtn2() {
    btn2.style.display = "inline";
}
'''

answered Aug 22 '20 at 23:37

jairui

1
4

score 0 · Accepted Answer · answered Aug 23 '20 at 00:09

There is no auto display is CSS. As tarkh mentioned in his answer, display block would insert the new button below the initial button, and other display options would have other behaviors. But the display property does not have a value auto.

This may be my opinion, but I think modern websites shouldn't use the onclick function for events. We should separate our HTML, JS and CSS. This helps with reusability. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

So I would create a solution that uses an event handler in the Javascript. Something like:

window.onload = function(){
const btn2 = document.getElementById("btn2");
const btn1 = document.getElementsByClassName("btn1");

    for(let i = 0; i < btn1.length; i++) {
        btn1[i].addEventListener('click', function(){
            btn2.style.display = "block";   
        })
    }
}

score 0 · Answer 6 · edited Aug 23 '20 at 02:32

0

Try using

btn2.style.display = "block";

for your script because css display doesn't have that kind of attribute you

you can read it more here : more you'll see there's no such thing as display:auto

edited Aug 23 '20 at 02:32

Dilan

2,610
7
23
33

answered Aug 23 '20 at 00:19

Mark Dev

170
1
11

This displays the button, but not in the right position. – Aug 23 '20 at 17:11

Why doesn't this code display the button after I hide it?

6 Answers6