Javascript 如何在HTML中获取图像以显示Val的特定时间_Javascript_Html

Javascript 如何在HTML中获取图像以显示Val的特定时间

javascript html

Javascript 如何在HTML中获取图像以显示Val的特定时间,javascript,html,Javascript,Html,HTML中的这个问题要求用户输入数字1-5，然后它将显示作为带有问号的骰子图片输入的数字量。无论我输入什么数字，我都会得到6个带问号的骰子。我该如何解决这个问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

HTML中的这个问题要求用户输入数字1-5，然后它将显示作为带有问号的骰子图片输入的数字量。无论我输入什么数字，我都会得到6个带问号的骰子。我该如何解决这个问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      text-align: center;
    }
    
    img {
      height: 150px;
    }
  </style>
</head>

<body>
  <h1>Click the button to see the roll of a die randomly selected</h1>
  <script>
    Val = window.prompt("Enter the number of dice to play with (1-5)");
    <!--if user enters a number <= 1 val ==1-->
    if(Val == 1 || Val <= 1){
      Val = 1;
    }
    else if(Val == 2){
      Val = 2;
    }
    else if(Val == 3){
      Val = 3;
    }
    else if(Val == 4){
      Val = 4;
    }
    <!--if user enters anything thats not 1-4 val = 5-->
    else Val = 5;
    function roll() {
      var randomDie = Math.floor(Val*Math.random()) + 1;
      var RandomNum = Math.floor(6*Math.random()) + 1;
      document.getElementById('dieImg' + randomDie).setAttribute("src","dieImages/die" + RandomNum + ".jpg");
      document.getElementById('dieImg' + randomDie).style.display="inline";
      document.getElementById('display').innerHTML = "Die " + randomDie + " was selected and rolled to show " + RandomNum;
    }
  </script>
  <!--Show question mark die-->
  <img id="dieImg1" src="dieImages/question-mark-dice.jpg">
  <img id="dieImg2" src="dieImages/question-mark-dice.jpg">
  <img id="dieImg3" src="dieImages/question-mark-dice.jpg">
  <img id="dieImg4" src="dieImages/question-mark-dice.jpg">
  <img id="dieImg5" src="dieImages/question-mark-dice.jpg">
  <hr>
  <button type="button" onclick="roll()">Click to Roll</button>
  <p id="display">--</p>
</body>

</html>


文件
身体{
文本对齐：居中；
}
img{
高度：150像素；
}
单击按钮以查看随机选择的模具卷
Val=window.prompt（“输入要玩的骰子数（1-5）”；
如果（Val==1 | | Val

点击滚动
--

这是应用程序在我输入3时显示的内容，

这就是我想要的输出，

首先，您不需要重新分配每个值

if（Val==1 | | Val欢迎来到社区Aaron。当逻辑显而易见时，不需要显式地使用if…else if…else…
。KayD在下面的回答中很好地演示了这一点。此外，您需要理解HTML本身不是动态的，javascript（或CSS）使其成为动态的。