Show hidden image using JavaScript and HTML5 (relates to existing post)?

Question

Yes the

 <Input type='Button'>,

suggested by Mike made the difference.

Edited code below

This is a follow on question to

HTML5, div, hidden, show on click

I'm trying to get a working example, based on the last answer in that post.

Still confused about how I should have posted this...Should I have posted my question as a 'comment' in response to original post I followed? Or do I create a posting when it's a new (I think) question? There's also the other posting that Mike recommended, that cleared up the problem.

I'd like to be able to 1) add the lightbulb image- 'WebVuCoolOldBulb-2.jpg' to the DOM (did I use 'DOM' right?)

and ALSO understand how to 2) Replace my cactus picture - img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg with the picture of the lightbulb - WebVuCoolOldBulb-2.jp

The code runs clean with no errors from 'Show Error Console' in Safari. But it does not add the light bulb image

<html>
<body>
<form>

  <img id="cactusPhoto" 
       src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg" 
       alt="Picture from Joshua Tree."
       height="100" width="100" >

  <button 
       type=button
      onclick="show_image('WebVuCoolOldBulb-2.jpg', 276, 110, 'Light Bulb');">
    Add Lightbulb
  </button> 

</form>
<script>
//https://stackoverflow.com/questions/25487865/html5-div-hidden-show-on-click
function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;

  // This next line will just add it to the <body> tag
  document.body.appendChild(img);
}
</script>
</body>
</html>

Possible duplicate of [HTML button to NOT submit form](http://stackoverflow.com/questions/2825856/html-button-to-not-submit-form) — Mike Cluck, Jun 21 '16 at 18:39
^ The problem is that your button is submitting the form. That question should help. — Mike Cluck, Jun 21 '16 at 18:40
Sorry Mike I missed your hint about that posting. I will re read the posting and it's follow ups — LaurelS, Jun 21 '16 at 19:13
Yes! Now I get it! I will edit the posting and show the corrected version. Thank you. I hope I clicked the right up arrow on your answer. — LaurelS, Jun 21 '16 at 19:19

Rayon · Answer 1 · 2016-06-21T18:47:33.160

Use type=button as default behavior of <button> is to submit the form and hence, page will be unloaded.
Pass reference of image element so that element could be accessed using DOM-api.

function show_image(id, src, width, height, alt) {
  var img = document.getElementById(id);
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;
}

<img id="cactusPhoto" src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg" alt="Picture from Joshua Tree." height="100" width="100">

<button type="button" onclick="show_image('cactusPhoto','WebVuCoolOldBulb-2.jpg',276,110,'Light Bulb');">Add Lightbulb</button>

No but at the time that I commented your code did not work at all. — Mike Cluck, Jun 21 '16 at 18:47

Show hidden image using JavaScript and HTML5 (relates to existing post)?

1 Answers1