This Question have 2 answers right now.

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>




Wrapping lists into columns


How to set up a CSS switcher

Autosizing textarea using Prototype

style.display not working in Firefox, Opera, Safari - IE7 OK

Setting the height of a DIV dynamically

Making an iframe take vertical space

Can I stop .NET eating IDs?

Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace

Google Finance - Get Quotes search box - Column Alignment

CSS overflow table row positioning

Will .NET MVC give me the HTML/CSS/JS separation I need?


What is the best online javascript/css/html/xhtml/dom reference? [closed]

Is there a way to make text unselectable on an HTML page? [duplicate]

How to set up the browser scrollbar to scroll part of a page?

Google Maps, Z Index and Drop Down Javascript menus

How to center text over an image in a table using javascript, css, and/or html?

How to implement a web page that scales when the browser window is resized?

What are some excellent examples of user sign-up forms on the web? [closed]

Make a div fade away nicely after a given amount of time

Video about Make an image dissappear onClick in Javascript