时间戳

首页 > 解决方案 > 如何让图像在 HTML 中显示一定次数的 Val

javascript - 如何让图像在 HTML 中显示一定次数的 Val

问题描述

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>

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

这就是我想要的输出， 截图图像

标签： javascripthtml

解决方案

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

    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 a number <= 1 val ==1
if (Val < 1) {
  Val = 1;
}
//if user enters anything thats not 1-4 val = 5
if (Val > 4) {
  Val = 5
}

第二，

它每次都显示 5 张图像，因为您在 HTML 中提到过，您需要createElement使用循环动态创建 img 元素。

 let img = document.createElement('img');
 img.src = "dieImages/question-mark-dice.jpg";
 img.id = "dieImg" + i;
 let dices = document.getElementById("dices");
 dices.appendChild(img);

我重写了您的示例，该示例按您的预期工作。

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;
}
//if user enters anything thats not 1-4 val = 5
if (Val > 4) {
  Val = 5
}
for (i = 1; i <= Val; i++) {
  let img = document.createElement('img');
  img.src = "dieImages/question-mark-dice.jpg";
  img.id = "dieImg" + i;
  let dices = document.getElementById("dices");
  dices.appendChild(img);
}

function roll() {
  var randomDie = Math.floor(Val * Math.random()) + 1;
  var RandomNum = Math.floor(6 * Math.random()) + 1;
  var diceElement = document.getElementById('dieImg' + randomDie);
  diceElement.setAttribute("src", "dieImages/die" + RandomNum + ".jpg");
  diceElement.style.display = "inline";
  document.getElementById('display').innerHTML = "Die " + randomDie + " was selected and rolled to show " + RandomNum;
}
<!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>
  <!--Show question mark die-->
  <div id="dices">
  </div>
  <hr>
  <button type="button" onclick="roll()">Click to Roll</button>
  <p id="display">--</p>
</body>

</html>

推荐阅读