CODEWITHSUNDEEP
javascripthtmljquery
yappy twan
yappy twan

Reputation: 1211

How to make divs appear and disappear?

I have on my ui following html elements

<button onclick="getLocation()">Try It</button>

<p id="long"></p>Longitude<br>
<p id="lat"></p> Latitude<br>
<input type="text" id="ethaddress" placeholder="Enter your ETH address">
<button onclick="writeData()">Submit</button>

when someone visits the site i only want to show the user the "try me" button. once he clicks the "try me" button i want this button to dissapear and i want to show the elements with the id long, lat and ethaddress and the submit button

You find a link to an example here: http://shiny-reaction.surge.sh

Upvotes: 1

Views: 55

Answers (2)

anon
anon

Reputation: 816

EDIT Now your issue is that in your js file your getLocation() function is defined as:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
  //  x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

So that will not be hiding or showing anything, you need to update this.

In vanilla js, you could try this:

function getLocation(btn){
  btn.style.display = "none";
  document.getElementById("form").style.display = "block";
}
#form{
  display: none;
}
<button id="button" onclick="getLocation(this)">Try It</button>
    
<form id="form">
  <p id="long"></p>Longitude<br>
  <p id="lat"></p> Latitude<br>
  <input type="text" id="ethaddress" placeholder="Enter your ETH address">
  <button onclick="writeData()">Submit</button>
</form>

Upvotes: 2

Ale Plo
Ale Plo

Reputation: 819

Depending if you want the elements to take up space you could go with visibility: hidden; or display: none;. You set app an eventlistener to change the display property to block. You can do this in pure JS or Jquery with addClass.

Upvotes: 1

Related Questions