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>

^ The problem is that your button is submitting the form. That question should help. — Mike Cluck
– Mike Cluck, Commented Jun 21, 2016 at 18:40
Sorry Mike I missed your hint about that posting. I will re read the posting and it's follow ups — LaurelS
– LaurelS, Commented Jun 21, 2016 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
– LaurelS, Commented Jun 21, 2016 at 19:19

Rayon · Accepted Answer · 2016-06-21 18:47:33Z

1

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>

edited Jun 21, 2016 at 18:47

answered Jun 21, 2016 at 18:39

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Cluck Over a year ago

No but at the time that I commented your code did not work at all.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related