How to add image to button via Javascript?

Question

I am trying to add image to buttons I have using Javascript but I can't seem to get it working. I have sucessfully added image using HTML5, however, for my needs I need to add the image via javascript.

Below is what I have written to add images via HTML.

<button class="button" id="Ok"><img src="images/ok.png"></button>

Below is what I have tried to add image via Javascript but it doesn't seem to work.

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].src = "images\ok.png";   
  }

I am not to sure what I am doing wrong, any help would be nice. Thanks.

Nope, no luck. Getting this error: TypeError: Cannot set property 'src' of null. — Henry, Mar 02 '16 at 08:47

score 15 · Accepted Answer · answered Mar 02 '16 at 09:18

15

I don't know if this is what you need..

<button id="button"></button>

<script type="text/javascript">
    var buttons = document.getElementById("button");
    buttons.innerHTML = '<img src="images\ok.png" />';
</script>

answered Mar 02 '16 at 09:18

MGB C

442
2
7
21

1

I have 1 issue, because its a image inside the button, it overlaps the button and when I click the section of the button where the image is, the website doesn't seem to record my clicks. – Henry Mar 02 '16 at 10:00
is it possible to give the img tag the same id as the button it is in – Henry Mar 02 '16 at 10:07
please update your question above so that we can trace the problem. put your code above also.... – MGB C Mar 02 '16 at 11:24

James Karlton Stone · Answer 2 · 2016-03-02T09:25:04.207

I think this may be what you're looking for.... this will set the buttons direct background as the image. But you must set the width and height options to your images width and height or it will be cut off or have white space, depending on the size of the button and image.

<style>
  button.button#ok
  {
    width:100px;
    height:100px;
  }
</style>
<button class="button" id="ok"></button>
<script>
  var buttons=document.getElementsByClassName("button");
  for(var b=0;b<buttons.length;b++)
  {
    if(buttons[b].id=="ok")
    {
      buttons[b].style.background="url('images/ok.png')";   
    }
  }
</script>

Edit, source

Here is the code in action:

http://js.x10.bz/helpstack/35742199/button.html

Here is the source of the code(which is above though):

http://js.x10.bz/helpstack/35742199/button.txt

And here is the image i used:

http://js.x10.bz/helpstack/35742199/cookies.jpg

score 1 · Answer 3 · answered Mar 02 '16 at 08:53

1

I would turn the button into a block element and give it a background image.

HTML:

<button class="button" id="Ok"></button>

CSS:

.button{
display:inline-block;
background:none;
width: 50px;
height: 20px;
}
.button.okay{
background:url('images/ok.png');
}

JS:

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
 buttons[b].classList.add("okay");
  }

answered Mar 02 '16 at 08:53

itamar

3,837
5
35
60

Hi, tried this but its not working. Also, I want a way that only uses javascript – Henry Mar 02 '16 at 09:07

score 1 · Answer 4 · edited Mar 03 '16 at 08:58

1

Try this:

buttons[b].firstChild.src= "images\ok.png";

edited Mar 03 '16 at 08:58

Starscream1984

3,072
1
19
27

answered Mar 02 '16 at 08:56

baj9032

2,414
3
22
40

Hi @Ankit Bhanderi, Rayon Dabre also suggested did but this provides me with an error: TypeError: Cannot set property 'src' of null. – Henry Mar 02 '16 at 09:03

score 1 · Answer 5 · answered Mar 02 '16 at 09:04

1

I think you missing select tag , you only set src content for button element. Can you try with this

for (var b = 0; b < buttons.length; b++) {
   buttons[b].getElementsByTagName("img").src = "images\ok.png";   
}

answered Mar 02 '16 at 09:04

Binh Tran

11
2

Can you try to console.log how many it can get inside looping. for (var b = 0; b < buttons.length; b++) { buttons[b].getElementsByTagName("img").src = "images\ok.png"; console.log(buttons[b].getElementsByTagName("img")); } If it an empty array, we can try another way – Binh Tran Mar 02 '16 at 09:15
What do you mean?, when I try console.log(b); it gives back 28 numbers this is because I have 28 buttons. – Henry Mar 02 '16 at 09:20
command "src" only apply for tag. That why I'm try to get tag inside – Binh Tran Mar 02 '16 at 09:27
Oh, none of the buttons have img tag on them. I thought it won't be required because I wasn't adding image via html. – Henry Mar 02 '16 at 09:28
So, you need something like this; var x = document.createElement("IMG"); x.setAttribute("src", "images\ok.png"); buttons[b].appendChild(x); – Binh Tran Mar 02 '16 at 09:32

baj9032 · Answer 6 · 2016-03-02T09:46:23.527

1

**TRY THIS**

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
  <button class="button" id="Ok"></button>
<script>
var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].innerHTML = "<img src=\"ok/png\"/>";   
  }
</script>
</body></html>

edited Mar 02 '16 at 09:46

answered Mar 02 '16 at 09:11

baj9032

2,414
3
22
40

1

Please Load Body Tag First Then Load Your Script Tag. – baj9032 Mar 02 '16 at 09:14
Hi, this is initially adding the image through html because this buttons[b].firstChild.src = "images/ok1.png"; does not work. – Henry Mar 02 '16 at 09:15

How to add image to button via Javascript?

6 Answers6

Edit, source

Linked