How do I change a button into an image on click?

Question

Below is my existing code. It successfully changes an image into another image when clicked. I need to change it so it starts off as a button that says "HINT?" on it then changes to an image. I don't wish to use an image as the button.

<!--HINT 1-->
<script lanuage="javascript">
  function handleClick1(element) {
      element.src="http://leowestonvfx.com/wp-content/uploads/2016/02/dirty.jpg";
  }
</script>
<!--HINT 1 END-->

<img src="http://leowestonvfx.com/wp-content/uploads/2016/02/rock-hand.png" onclick="handleClick1(this);">

I thought I might be able to change it to a button like so, but it stops it working:

<input type="button" value="Hint?" onclick="handleClick1(this);">

because `input type="button"` doesn't support `src` – Sumit Sahay Feb 20 '16 at 20:14 — Sumit Sahay, Feb 20 '16 at 20:14

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

I suggest starting with a hidden image (style="display:none"), and then using jquery to show() the image and hide() the button onclick.

you can use an ID on the image along with jquery selectors, instead of having to pass this into your function.

also, you can change the src of an image using jquery (see this question). another option is using the append method to append html.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 20 '16 at 19:03

Noam Hacker

4,671
7
34
55

extra tip: include more relevant tags in your question for more relevant attention (i.e. "html", "javascript", etc.) – Noam Hacker Feb 20 '16 at 19:52

Doug · Answer 2 · 2016-02-21T13:32:44.277

Your original code uses the line:

<img onclick="handleClick1(this);">

As such, your code is effectively trying to call

button.src="http://example.com/myimage.png";

Which will not work as the src attribute will only work with an image element.

The easiest way to get the effect that you desire would be to place the elements in a container, then control via CSS whether it should be visible or not. Something like this should solve your problem:

HTML

<div class="hint">
    <button type="button">Hint?</button>
    <img src="http://example.com/my_ending_image.png">
 </div>

JavaScript

function buttonClick(){
    this.parentNode.classList.add("show");
}

var buttons = document.querySelectorAll(".hint button");
for (var x=0; x<buttons.length; x++) {
    buttons[x].addEventListener("click", buttonClick);
}

CSS

.hint.show button {
  display: none;
}

.hint img {
  display: none;
}

.hint.show img {
  display: block;
}

A JSFiddle showing the functionality can be seen here

Thanks but I can't seem to get this to work. And I'm not sure why the code you've given references 2 images. Starting and Ending. I only want a button to start with that turns into an image when clicked. — leo weston, Feb 21 '16 at 12:25
I misunderstood your question a little, I've changed my answer to hopefully be more in line with what you're after — Doug, Feb 21 '16 at 13:33

score 1 · Answer 3 · answered Feb 21 '16 at 20:08

Thanks for your answers. I actually figured out how to do it like this:

<body onload="hideallhints()">


<script>
function hideallhints() {
    document.getElementById("artwork1").style.display = "none"; 
}

function HINT1() {
    document.getElementById("artwork1").style.display = "block"; 
    document.getElementById("hintbutton").style.display = "none";
}
</script>


<img id="artwork1" src="w3javascript.gif" width="100" height="132">
<br>

<button type="button" id="hintbutton" onclick="HINT1()">Hint?</button>



</body>

How do I change a button into an image on click?

3 Answers3