javascript - JS设置span的背景图片

Question

JS:

function getItem() {
  var rand = Math.floor((Math.random() * 110) + 1);
  Weapon = "Opening..."
  document.getElementById("Weapon").innerHTML = Weapon;

  if (rand < 3) {
      document.getElementById("Weapon").innerHTML = "Item Type One";
  } else if (rand > 2 && rand < 5) {
      document.getElementById("Weapon").innerHTML = "Item Type Two";
  }
  // Continues onward etc...
}

HTML:

<button onclick="getItem()">Get Item</button>
<span id="image"><!-- Display an image here? --></span>
You Unboxed: <span id="Weapon">Nothing</span>

我想知道是否可以通过我的 Javascript 代码在此 HTML 中设置图像的来源。所以如果我得到“Item One”，它会在我的 HTML 中显示该图像吗？

Answer 1

您只需要创建一个包含图像路径的数组，例如

var images = ["image1.png", "image2.png"]

然后获取对图像元素的引用，然后相应地将其源设置为数组中的图像

myImage.src = images[0]例如

编辑:

所以你说你有一组这样的图像

var images = ["stub.png", "Other.png"];

我看到您正在使用 <span>显示您的图像。所以你需要得到那个 <span> 的引用元素。

var myImage = document.getElementById("weapon");

由于您使用的是 <span>元素来显示您的图像，而不是 <img> , 所以为了展示你的形象，你这样做

myImage.style.backroundImage = url(images[n]); n 是对应于您的 if/else 的图像索引。你应该使用 <img>而是显示您的图像。