How to load an image on button click?

Question

I'm kind of new to HTML / Javascript, and I'm trying to figure out how to make it so when I click a button, an image loads. This is all I can come up with, but then again I am very bad with this stuff, and I am still learning greatly .

<html>
<div style="visibility:invisible" id="theTrick">
<img id="myImage" src="https://minecraft.net/images/logo.png" alt="Test">
</div>
<button type="button" onclick="myFunction">Click for the Minecraft Logo</button>
<script>
function myFunction() {

    document.getElementById="theTrick".style = "visibility:initial"

}
</script>
</html>

EDIT

I have solved this, and since then learned a LOT more, mastering HTML and CSS, and now learning the works of JavaScript. I do have a question though to add on to this; is there a way to have the image disappear on another click, then reappear on the next click, and so on?

Answer 1

A few things:

It's visibility: hidden , not visibility: invisible .
It's myFunction() , not myFunction .
It's document.getElementById("theTrick") , not document.getElementById = "theTrick" .
It's visibility: visible , not visibility: initial (the initial visibility is hidden , which you've set at the top).

You may find this document on the CSS visibility property useful.

Demo

How to load an image on button click?

Question

EDIT

1 answers

solution1
2 ACCPTED 2014-07-03 01:30:30

How to load an image on button click?

Question

EDIT

1 answers

solution1 2 ACCPTED 2014-07-03 01:30:30

solution1
2 ACCPTED 2014-07-03 01:30:30