如何使用if语句修复切换img

时间:2016-11-12 08:54:20

标签: javascript html

我正在尝试使用查看数组的if语句来切换图像。代码似乎不起作用。我已经能够通过另一个文件中的按钮来使用它

var deck = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52];

function myFunction() {
    deck.shift();
    deck.shift();
    deck.shift();
    deck.shift();

    if (deck[0] == 1) {
      if (document.getElementById("01c")) {
        document.getElementById("img").src = "01c.png";
      }
    } else if (deck[0] == 2) {
      if (document.getElementById("01d")) {
        document.getElementById("img").src = "01d.png";
      }
    }
<button onclick="myFunction()">try it</button>
<img src="" id="img" />

这是一个有效的例子但没有if语句

function pic1() {
  document.getElementById("img").src = "http://cliparts.co/cliparts/8TG/beG/8TGbeGAAc.png";
}

function pic2() {
  document.getElementById("img").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Playing_card_diamond_9.svg/2000px-Playing_card_diamond_9.svg.png";
}
<img src="" id="img" height="50" />
<input type="button" value="Show Picture 1" onclick="pic1()" />
<input type="button" value="Show Picture 2" onclick="pic2()" />

1 个答案:

答案 0 :(得分:0)

为什么不将目标元素存储在数组中?而不是使用

var deck = [1, 2, 3, 4, 5, 6, 7, /* ... */];

您可以使用数组内部卡片的目标,例如

var deck = ['01a', '01b', '01c', '01d', '02a', '02b', '02c', /* ... */];

用法

if (document.getElementById(deck[0])) {
    document.getElementById("img").src = deck[0] + ".png";
}