时间戳

首页 > 解决方案 > 按下按钮后如何使用if函数显示不同的图像

javascript - 按下按钮后如何使用if函数显示不同的图像

问题描述

对于我的拼贴作业，我需要创建一个 html 网页，如果您按下按钮是，它会显示一个数字和相应的图像。我已经想出了如何创建随机数，但在按下按钮时无法显示相应的图像。我对此很陌生，任何帮助将不胜感激

这是java脚本

function randomNumber() {
  var ranNumgen = Math.floor((Math.random() * 6) + 1);
}

console.log("randomNumber");
if ("number" == 1) {
  document.getElementById('img1').src = "image/dice1.jpg";
} else if ("number" == 2) {
  document.getElementById('img1').src = "image/dice2.jpg";
} else if ("number" == 3) {
  document.getElementById("img1").src = "image/dice3.jpg"
} else if ("number" == 4) {
  document.getElementById("img1").src = "image/dice4.jpg";
} else if ("number" == 5) {
  document.getElementById("img1").src = "image/dice5.jpg";
} else if ("number" == 6) {
  document.getElementById("img1").src = "image/dice6.jpg";
}
<head>
  <title></title>
  <button id="b" onclick="ranNumgen()"> Yes </button>
  <button onclick="Num2button()">No</button>
</head>

<body>
  <p id="number"> </p>


And this is all my code 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <button id="b" onclick="ranNumgen()">   Yes </button>
    <button onclick="Num2button()">No</button>
</head>
<body>
    <p id="number"> </p>

    <script type="text/javascript">

        function randomNumber() {
        var ranNumgen = Math.floor((Math.random() *6) +1);      
}
    
    console.log("randomNumber");
    if ("number" ==1 ) {
        document.getElementById('img1').src ="image/dice1.jpg";
    }

   else if ("number" ==2) {
    document.getElementById('img1').src ="image/dice2.jpg";
   }
   else if ("number"==3) {
    document.getElementById("img1").src="image/dice3.jpg"
   } 
   else if ("number"==4) {
document.getElementById("img1").src="image/dice4.jpg";
   }
   else if ("number"==5) {
        document.getElementById("img1").src="image/dice5.jpg";
   }
   else if ("number"==6) {
        document.getElementById("img1").src="image/dice6.jpg";
   }

        function Num2button() {
        var button2 = "Are you sure"
        alert(button2);
            }


    </script>
    




</body>
                    
</html>

标签： javascripthtml

解决方案

您可以将逻辑分配给您的randomNumber函数，最好将其重命名为generateRandomPicture之类的名称。

然后您需要一个具有您指定的 id 的元素，并且我建议您使用 eventListener 而不是执行内联脚本。

您可以将 .addEventListener() 添加到您的元素中。

document.getElementById('b').addEventListener('click', randomNumber);


document.getElementById('b').addEventListener('click', randomNumber);

function randomNumber() {
  let number = Math.floor((Math.random() * 6) + 1);

  if (number == 1) {
    document.getElementById('img1').src = "image/dice1.jpg";
  } else if (number == 2) {
    document.getElementById('img1').src = "image/dice2.jpg";
  } else if (number == 3) {
    document.getElementById("img1").src = "image/dice3.jpg"
  } else if (number == 4) {
    document.getElementById("img1").src = "image/dice4.jpg";
  } else if (number == 5) {
    document.getElementById("img1").src = "image/dice5.jpg";
  } else if (number == 6) {
    document.getElementById("img1").src = "image/dice6.jpg";
  }

}
<head>
  <title></title>

</head>

<body>
  <p id="number"> </p>
  <img id="img1"></img>
  <button id="b"> Yes </button>
  <button onclick="Num2button()">No</button>
</body>

推荐阅读