Changing Visibility Using JavaScript

changing visibility using javascript

function loadpage (page_request, containerid)
{
  var loading = document.getElementById ( "loading" ) ;

  // when connecting to server
  if ( page_request.readyState == 1 )
      loading.style.visibility = "visible" ;

  // when loaded successfully
  if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  {
      document.getElementById(containerid).innerHTML=page_request.responseText ;
      loading.style.visibility = "hidden" ;
  }
}

Why can't I use javascript to change the visibility property to hidden

This may solve your problem.

Changes I did,

I removed the onclick from the button. You don't need it as long as you have registered the click event in the JavaScript side.
I fixed your HTML as you had incorrect markup. _(You forgot to close the <script> tag, as well you forgot to close the second div tag.
I change the logic of your script to make it more performant.

<!DOCTYPE html><html><head>      <style>          .enterPostBackground {              background-color: gainsboro;              width: 400px;              height: 50px;          }
          #SmileyDiv {              height: 80px;              width: 160px;              background-color: grey;              overflow: scroll;              visibility: hidden;          }
      </style></head>
<body>    <br>    <br>    <div id="SmileyDiv"></div>    <div class="enterPostBackground">
        <button             class="test"             id="SmileyButton"             style="font-size: 30px;float:left;"            type="button"          >😃</button>     </div></body></html><script>// I get the SmileyDiv here. This is because it runs only once, and makes // your script more performant.var button = document.getElementById("SmileyDiv");document.getElementById("SmileyButton").addEventListener("click", getSmileys);
// I set the initial visibility status herebutton.style.visibility = 'visible';
function getSmileys() {    // You had forgot to add the `.style` in the button property. That's     // why the button didn't worked properly.    if (button.style.visibility === 'hidden') {        button.style.visibility = 'visible'    } else {        button.style.visibility = 'hidden'    }}</script>

How to make a DIV visible and invisible with JavaScript?

if [DIV] is an element then

[DIV].style.visibility='visible'

[DIV].style.visibility='hidden'

How to instantly change the visibility property of child if it has a transition

With transition: 0.4s; you are applying a transition to all transitionable properties that undergo a change in value - and visibility is one of them.

The most easy fix here in this instance would probably be, that you just specify which property you want to transition explicitly,

transition: background 0.4s;

Then the change of the visibility property can apply right away.

How to change the visibility of a div tag using javascript in the same page?

Using the `visibility` attribute:

Show the div with id="yourID":

document.getElementById("yourID").style.visibility = "visible";

To hide it:

document.getElementById("main").style.visibility = "hidden";

Using the `display` attribute:

Show:

document.getElementById("yourID").style.display= "block";

Hide:

document.getElementById("yourID").style.display= "none";

button onclick change visibility of a class using javascript

You are using : which used in Object initializer but for assigning you should use =.

getElementsByClassName return a HTMLCollection. It doesnot have property style. You can use forEach() and querySelectorAll().

function signup()
{
   document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");
   document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");
}

Working Snippet

document.getElementById("btn").addEventListener("click", function(e) {  signup()});
function signup(){       document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");       document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");}

<div class="feel">  <h2>Be a part of this society to feel.</h2>  <p><a href="">Forgot your password?</a> Doesn't have an account?    <button id="btn" onclick="return(signup());" id="sign">Signup</button>    <form action name="myForm" onsubmit="return(validate());">      <input type="email" required placeholder="Email Address" name="email">      <input type="password" placeholder="Password" name="pass">      <input type="submit" name="submit" Value="Sign In">    </form></div><div class="feels">  <h1>Please provide the following informations:</h1>  <form action name="form" onsubmit="return(validate1());">    <input type="text" placeholder="Firstname" name="fname">    <input type="text" placeholder="Lastname" name="lname">    <input type="email" placeholder="Email Address" name="email">    <input type="password" placeholder="Password" name="pass">    <input type="password" placeholder="Re-type Password" name="repass">    <input type="radio" name="gender" value="male"> Male    <input type="radio" name="gender" value="female"> Female    <input type="submit" name="submit1" Value="Submit">  </form></div>

Changing Visibility Using JavaScript