Make an image dissappear onClick in Javascript

Question!

I am taking a cool JavaScript course called "Javascript Tutorial". The video instruction showed something that is not happening for me. What is supposed to happen is to click on an image with an HTML tag of logo to make it disappear, then click a button that says "Get Logo" to bring it back.

Here is an excerpt of the jstut.html file I have been building throughout the course:

<!doctype html>
<html lan="en">
	<head>
		<meta charset="utf-8">
		<script src="jstut.js"></script>

		<style type="text/css">
		  body {font-size: 1.6em;}
		  .hidden {display:none;}
		  .show {display:inLine !important;}
		  button {
		  	border: 2px solid black; background: #ESE4E2;
		  	font-size: .5em; font-weight: bold; color: black;
		  	padding: .8em 2em;
		  	margin-top: .4em;
		  }
		</style>
	</head>
	<body>
		<img src="ntt-logo.png" id="logo">
		<button id="logoButton" type='text'>Get Logo</button>
	<script>
		document.getElementById('logoButton').onClick = function(event){
			document.getElementById('logo').className = "show";
		}

		document.getElementById('logo').onClick = function(event){
		  	document.getElementById('logo').className = "hidden";
		}		  
	</script>
	</body>
</html>

I compared my syntax to that of the course and it is an exact match. Please help me make the image disappear when I click on it.

I am using Firefox. I tried this with IE and Chrome, but it behaves the same way.

By : host_255


Answers

The best way to toggle between showing and hiding an element is using jQuery toggleClass function.

$('#logoButton').click(function() {
  $('#logo').toggleClass('hidden')
});
body {
  font-size: 1.6em;
}
.hidden {
  display: none;
}
#logoButton {
  display: block;
  margin-bottom: 10px;
}
button {
  border: 2px solid black;
  background: #ESE4E2;
  font-size: .5em;
  font-weight: bold;
  color: black;
  padding: .8em 2em;
  margin-top: .4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lan="en">

<head>
  <meta charset="utf-8">
  <script src="jstut.js"></script>


</head>

<body>
  <button id="logoButton" type='text'>Get Logo</button>
  <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" id="logo">


</body>

</html>

By : K. Daniek


Your code matches the tutorial you mentioned almost exactly. You have differed in that you have been calling .onClick where you should have been setting .onclick:

document.getElementById('logoButton').onclick = function(event) {
   document.getElementById('logo').className = "show";
}

document.getElementById('logo').onclick = function(event) {
    document.getElementById('logo').className = "hidden";
}

Note that properties are case sensitive in JavaScript.

  document.getElementById('logoButton').onclick = function(event) {
    document.getElementById('logo').className = "show";
  }

  document.getElementById('logo').onclick = function(event) {
    document.getElementById('logo').className = "hidden";
  }
body {
  font-size: 1.6em;
}
.hidden {
  display: none;
}
.show {
  display: inLine !important;
}
button {
  border: 2px solid black;
  background: #ESE4E2;
  font-size: .5em;
  font-weight: bold;
  color: black;
  padding: .8em 2em;
  margin-top: .4em;
}
<img src="//placehold.it/200x200" id="logo">
<button id="logoButton" type='text'>Get Logo</button>



This video can help you solving your question :)
By: admin