html - Make an image disappear onClick in JavaScript

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>

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 pared 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.

Share Improve this question edited Sep 28, 2016 at 23:20 asked Sep 28, 2016 at 22:58 host_255 3612 gold badges8 silver badges18 bronze badges

8 javascript is case sensitive, it's onclick not onClick – Patrick Evans Commented Sep 28, 2016 at 23:02
@host_255 what is in the jstut.js file you're referencing in the head of the html file? – Tom Gillard Commented Sep 28, 2016 at 23:03
3 I'm voting to close. The only (functional) problem with this code is the onclick syntax/case sensitivity issue. – 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 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 mented out, and has nothing to do with this issue. – host_255 Commented Sep 28, 2016 at 23:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 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>

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./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./images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" id="logo">


</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Make an image disappear onClick in JavaScript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)