html image src call javaScript variable

Question

this is my code: I want to ask

<script type="text/javascript">

var total = 4;

</script>

How can I do this?

<img src="img/apple_" + total + ".png" id="imageBox"/>

I've been try to use call function and document.onload but it's not work at all, can somebody save me?

Answer 1

You need to add html in JavaScript like this:

<div id="foo"></div>
<script type="text/javascript">

var total = 4;
document.getElementById('foo').innerHTML = '<img src="img/apple_' + total + '.png" id="imageBox"/>';
</script>

Answer 2

I am supposing you just want to update the image src with javascript.

document.getElementById('imageBox').src = "img/apple_" + total + ".png";

Answer 3

window.onload = function() {
  var total = 4;
  document.getElementById('imageBox').src = 'img/apple_' + total + '.png"';

};

<img src="" id="imageBox"/>