HTML 图片 src 如何调用 JavaScript 变量

Question

这是我的代码：我想问

<script type="text/javascript">

var total = 4;

</script>

我该怎么做？

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

我一直在尝试使用call函数和document.onload，但根本不起作用，有谁能帮帮我？

- Neo

Answer 1

我猜您只是想使用JavaScript更新图像的src。

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

- kp singh

---

好的，谢谢你提醒我，我把我的JavaScript代码放在HTML下面了，这样它就会加载。 - Neo

Answer 2

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>

- jcubic

---

为什么使用div？但我正在使用<img/>。 - Neo

div元素需要放在onload事件内的脚本或代码之前，否则getElementById将无法找到#foo元素。 - jcubic

Answer 3

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

};

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

- Sunil Kumar

---

在哪里放置window.onload？ - Neo

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');

- kemicofa ghost