使用数学.随机生成图片

Question

我的网站上有两张图片，当我点击其中一张图片时，我希望我的代码打印出猫或青蛙，使用数学。我希望这是随机的，我希望用户也得到一个消息，让他们知道他们是对还是错。

var outputDiv = document.getElementById("output-div");
var randomNumber;
var message;
function setRandomNumber() {
randomNumber = Math.floor(Math.random() * 100 + 1);
}
function setMessage() {
var image;
if (randomNumber <= 50) {
image = "cat.jpg";
} else {
image = "frog.jpg";
}
message = `
<h3>${image}</h3>
<img src="img/${image}"/>
`;
}
function showMessage() {
outputDiv.innerHTML = message;
}
function initLuckyDay() {
setRandomNumber();
setMessage();
showMessage();
}
initLuckyDay();

<h3>Click the one that you think have a cat!</h3>
<div id="output-div"></div>
<input type="image" src="img/person1.jpg" name="click" class="button" id="clickme" />
<input type="image" src="img/person2.jpg" name="click" class="button" id="clickme" />

Answer 1

您应该能够将所有这些函数组合成一个函数。我将使用.setAttribute()来更改图像的来源，使用.innerText来更改消息显示。

const h3Message = document.getElementById('message'),
htmlImg = document.getElementById('displayImg');
function setImage() {
let random = Math.random(); // generate a random number
if (random < 0.5) {
// set the source of the image
htmlImg.setAttribute('src', 'dog.png');
} else {
htmlImg.setAttribute('src', 'cat.png');
}
// display the message
h3Message.innerText = htmlImg.getAttribute('src');
}

要这样做，您需要为HTML元素设置id。

<h3 id="message"></h3>
<img id="displayImg" />