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><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.
16 Answers
I don't know if this is what you need..
<button></button>
<script type="text/javascript"> var buttons = document.getElementById("button"); buttons.innerHTML = '<img src="images\ok.png" />';
</script>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></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:
Here is the source of the code(which is above though):
And here is the image i used:
I would turn the button into a block element and give it a background image.
HTML:
<button></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"); }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";
}**TRY THIS**
<!DOCTYPE html>
<html lang="en"><head>
</head><body> <button></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>Try this:
buttons[b].firstChild.src= "images\ok.png";
