host_255 host_255 - 2 months ago 12
CSS Question

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>





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.

Answer

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>