Make an image disappear 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.

@host_255 what is in the jstut.js file you're referencing in the head of the html file? — Tom Gillard
– Tom Gillard, Commented Sep 28, 2016 at 23:03
I'm voting to close. The only (functional) problem with this code is the onclick syntax/case sensitivity issue. — Makyen
– Makyen ♦, Commented Sep 28, 2016 at 23:08
That is exactly what it was. The instructor was using .onClick on Mac and the functions worked on Chrome. I don't quite get that. But, .onclick works fine. @Makyen — host_255
– host_255, Commented Sep 28, 2016 at 23:22
@TomGillard the jstut.js file contains one line that was used by the jstut.html file earlier in the video, which I commented out, and has nothing to do with this issue. — host_255
– host_255, Commented Sep 28, 2016 at 23:24

Robin James Kerrison · Accepted Answer · 2016-09-28 23:08:33Z

5

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>

answered Sep 28, 2016 at 23:08

Robin James Kerrison

1,7771 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

host_255 Over a year ago

This is the course. About 1 hour 2 min 29 sec in, you will see that the instructor uses onClick and it works on Chrome on his Mac. I am using Windows 7 Home Premium, Firefox, Chrome, IE, etc. I don't know if that makes any difference or why onClick works for him but not me. I feel that is something I should know. Do you have any idea? @Robin James Kerrison

Robin James Kerrison Over a year ago

@host_255 That onClick must have been an unfortunate typo. At 1:02:49, you'll see that it does say onclick following a strange jump cut. This is likely a One I Prepared Earlier moment.

kind user · Accepted Answer · 2016-09-28 23:21:53Z

1

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>

answered Sep 28, 2016 at 23:21

kind user

42k8 gold badges69 silver badges78 bronze badges

2 Comments

host_255 Over a year ago

Thank you for that. I agree that JQuery is better. The course does not teach JQuery. I have another 6 hour video tutorial I am going to take, then I think JQuery is my next subject to learn. Thank you!

Makyen Over a year ago

Providing a jQuery solution for a Question that is specifically tagged JavaScript and not jQuery when neither the question text nor the OP's comments contain any hint that th OP is using jQuery is counterproductive.

Collectives™ on Stack Overflow

Make an image disappear onClick in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related