html image src調用javaScript變量

Question

這是我的代碼：我想問一下

<script type="text/javascript">

var total = 4;

</script>

我怎樣才能做到這一點？

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

我一直在嘗試使用call函數和document.onload，但它根本不起作用，有人可以救我嗎？

Answer 1

我想你只是想用javascript更新圖像src。

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

Answer 2

您需要在JavaScript中添加html，如下所示：

<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 3

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

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

Answer 4

這是一個干凈的方法來做到這一點。

演示

var create_img_element = function(total, targetId){
    //create the img element
    var img = document.createElement('img');
    //set the source of the image
    img.src = 'img/apple_' + total + '.png';
    //add the image to a specific element
    document.getElementById(targetId).appendChild(img);
}

create_img_element(5, 'foo');