Why can't I style tags via css when I used them on a javascript?

Question

I am trying to style my div and button as well, using css. But after including a javascript code for my button wherein its function is to show and hide my div form. Whatever I type on my css doesn't seem to affect the style of my div anymore.

What do I have to do?

Here is my code:

 var theForm = document.getElementById('show-form').style.visibility = 'hidden'; var theButton = document.getElementById('show-button'); var thexButton = document.getElementById('hide-button'); thexButton.onclick = function() { document.getElementById('show-form').style.visibility = 'hidden'; } theButton.onclick = function() { document.getElementById('show-form').style.visibility = 'visible'; } 

 .hide-button { background: red; } .form-wrapper { margin: auto; width: 50%; } 

 <button id="show-button">Add Report</button> <div class="form-wrapper" id="show-form"> <button id="hide-button">X</button> <form action="add.php" method="post"> <label>File Name: </label> <input class="input2" type="text" required><br> <input class="submit-btn" type="submit" name="insert" value="Save"> </form> </div> 

Answer 1

As your button has the id of hide-button but in css you select it as .hide-button so Change following code

.hide-button {
  background: red;
}

to this

#hide-button {
  background: red;
}

Answer 2

If you mean the hide button. You used class in the css but in the HTML you use id. So here's the fix.

 var theForm = document.getElementById('show-form').style.visibility = 'hidden'; var theButton = document.getElementById('show-button'); var thexButton = document.getElementById('hide-button'); thexButton.onclick = function() { document.getElementById('show-form').style.visibility = 'hidden'; } theButton.onclick = function() { document.getElementById('show-form').style.visibility = 'visible'; } 

 #hide-button { background: red; } .form-wrapper { margin: auto; width: 50%; } 

 <button id="show-button">Add Report</button> <div class="form-wrapper" id="show-form"> <button id="hide-button">X</button> <form action="add.php" method="post"> <label>File Name: </label> <input class="input2" type="text" required><br> <input class="submit-btn" type="submit" name="insert" value="Save"> </form> </div> 

Answer 3

I don't know why but I used this method and it ran. Maybe my system is the problem.

.form-wrapper .hide-btn {
    background-color: red;
    cursor: pointer;
}