JS - 如何使用单独的变量更改图像SRC？

Question

如何在JavaScript中使用单独的变量更改图像路径？这是我的意思的一个例子：

function changeImage() {
    var newName = "image1";
    var imageID = document.getElementById("imageID");
    imageID.src = "images/" + newName + ".png";
}

我实际使用的代码是这样的（只有相关的部分）：

var choices5 = ["Rock", "Scissors", "Lizard", "Paper", "Spock"];

function RPS5() {
    var aiChoiceNumber = Math.floor(aiNumberDecider * 5);
    var aiChoice = choices5[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices5.length; i++) {
        if (userChoice == choices5[i]) 
            userchoiceNumber = i;
    }
    RPS(userchoiceNumber, aiChoiceNumber, choices5, outcomes5);
    userImage.src = "images/" + userChoice + ".png";
    console.log(userChoice + ", " + aiChoice);
}

如果你还没想到它，我正在制作一个基于网络的RPSLS游戏。我想要访问的目录中的图片在那里，但是当我点击按钮来玩游戏/改变我的选择时它们不会改变。

感谢大家提前！

Answer 1

我把快速插入一个选择随机图像的插件，以防查看此代码可能有助于作为我们之前讨论的后续内容：http://plnkr.co/edit/BfFqel0sBnI68vNejUSr?p=preview

function init() {
  var images = [
    'https://www.bryanrock.com/application/files/7914/3349/4593/rock.png',
    'https://images-na.ssl-images-amazon.com/images/I/81tAWzf0iKL._SY450_.jpg',
    'https://cdn1.creativememories.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/c/scissors1.jpg',
    'http://animals.net/wp-content/uploads/2017/02/Lizard-2-640x425.jpg',
    'http://www.tabletmag.com/wp-content/files_mf/spock62037.jpg'
  ];
  var image = document.getElementById('image');

  setInterval(function() {
    var rnd = Math.floor(Math.random() * 5);
    image.src = images[rnd];
    image.onload = function() {
      var nw = image.naturalWidth;
      var nh = image.naturalHeight;

      if (nw > nh) {
        image.width = 300;
        image.height = 300 * nh / nw;
      }
      else {
        image.height = 300;
        image.width = 300 * nw / nh;
      }
    };
  }, 1000);
}