时间戳

首页 > 解决方案 > 图片不会改变 HTML

javascript - 图片不会改变 HTML

问题描述

自从我使用 html 并尝试制作一个简单的掷骰子网站以来已经有一段时间了。但是，在我按下指定按钮后，文本文件中的图像不会改变。我已经尝试了我能想到的一切，并且花了 5 多个小时试图弄清楚它为什么会起作用。

<html>
<h1>Dice roller</h1>
<p>Roll a dice to recieve a reward base on your roll.</p>
<script>
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dieroll = 0;
function roll(){
    var image = document.getElementById("dice");
    dieroll = getRandomInt(1,6);
    document.getElementById("result").innerHTML = dieroll;
    if (dieroll==1){
        image.src="1die.jpg";
    } else {
        if (dieroll ==2){
            image.src="2die.jpg";
        }
    } else {
        if (dieroll==3){
        image.src="3die.jpg";
    }
        
    } else {
       if (dieroll==4){
        image.src="4die.jpg";
    } 
    } else {
        if (dieroll==5){
        image.src="5die.jpg";
    }    
    } else {
        if (dieroll==6){
        image.src="6die.jpg";
    } 
    }
}
</script>
<body>
<button onclick="roll()">Click me to roll</button>
</body>
<h2>The value for your roll is:  <div id="result"></div></h2>
<div>
<img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">    
</div>
</html>

此外，我尝试使用文件名的图像输入正确，原始图像看起来很好，只是改变它是行不通的。

标签： javascripthtml

解决方案

它不起作用的原因是因为您嵌套的 if-else 语句太混乱了。这是使用switch案例的更好方法。

您可以检查以查看变化src：

工作片段：

<html>
<h1>Dice roller</h1>
<p>Roll a dice to recieve a reward base on your roll.</p>
<script>
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  var dieroll = 0;

  function roll() {
    var image = document.getElementById("dice");
    dieroll = getRandomInt(1, 6);
    document.getElementById("result").innerHTML = dieroll;

    switch (dieroll) {
      case 1:
        image.src = "1die.jpg";
        break;
      case 2:
        image.src = "2die.jpg";
        break;
      case 3:
        image.src = "3die.jpg";
        break;
      case 4:
        image.src = "4die.jpg";
        break;
      case 5:
        image.src = "5die.jpg";
        break;
      case 6:
        image.src = "6die.jpg";

    }
  }
</script>

<body>
  <button onclick="roll()">Click me to roll</button>
</body>
<h2>The value for your roll is:
  <div id="result"></div>
</h2>
<div>
  <img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">
</div>

</html>

推荐阅读