Image dont appear when click?

<!DOCTYPE html>
<html>
<head>
<style>
.show {display: inline-block;}
.hidden {display: none;}
</style>
</head>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>


<button onclick="document.getElementById('myImage').src='http://www.edmdistrict.com/wp-content/uploads/2016/04/Sun-Smiling-Blue-Sky-Cartoon-Fotolia_9210923_XS.jpg'" className = "show">Appear image</button>



<button onclick="document.getElementById('myImage').src='http://www.edmdistrict.com/wp-content/uploads/2016/04/Sun-Smiling-Blue-Sky-Cartoon-Fotolia_9210923_XS.jpg'" className = "hidden">Disappear image</button>



</body>
</html>

So you have no element (an img element, at a guess) with the id ‘myImage’. Can’t change source on an image that doesn’t exist.

But with that code, both buttons do the same thing. Neither one will ‘hide’ anything.

I’m not a big fan of inline code of JS…

One of the errors I see immediately is:
className = "hidden"

I’m assuming you meant:
class="hidden"

Plus you’re missing a image with the id “myImage”

Make img tag with src of your image
Use css to set display to hidden
Make button and add onclick=“show()”
Make a Js function called show
In show() function write something that changes style of display to show the img tag
Make button called hide and repeat previous steps

Profit