admin管理员组

文章数量:1317915

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

  • javascript
  • html
  • css
Share Improve this question edited Sep 28, 2016 at 23:20 host_255 asked Sep 28, 2016 at 22:58 host_255host_255 3612 gold badges8 silver badges18 bronze badges 5
  • 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

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>

本文标签： htmlMake an image disappear onClick in JavaScriptStack Overflow

版权声明：本文标题：html - Make an image disappear onClick in JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742024382a2415267.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。