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.
2 answers
solution1
5 ACCPTED 2016-09-28 23:08:33
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>
solution2
1 2016-09-28 23:21:53
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.