英文:
how to generate random images in javascript
问题
function computerRandom() {
var compImgs = ["rock1Computer.png", "paper1Computer.png", "scissors1Computer.png"];
var compRps = Math.floor(Math.random() * compImgs.length);
const showComp = document.canvas.src = compImgs[compRps];
var showImg = compImgs[showComp];
};
<div class="playerBtn">
<button type="button" onclick="showPRock(); computerRandom();" id="rockBtn">Rock</button>
<button type="button" onclick="showPPaper(); computerRandom();" id="paperBtn">Paper</button>
<button type="button" onclick="showPScissors(); computerRandom();" id="scissorsBtn">Scissors</button>
</div>
This code generates a random image for the computer's choice when a button is clicked, but there may still be issues with it that need debugging.
英文:
JS:
function computerRandom(){
var compImgs = ["rock1Computer.png", "paper1Computer.png", "scissors1Computer.png"];
var compRps = Math.floor(Math.random() * compImgs);
const showComp = document.canvas.src = compImgs[compRps];
var showImg = compImgs[showComp];
};
HTML:
<div class="playerBtn">
<button type="button" onclick="showPRock()" onclick="computerRandom()" id="rockBtn">Rock</button>
<button type="button" onclick="showPPaper()" onclick="computerRandom()" id="paperBtn">Paper</button>
<button type="button" onclick="showPScissors()" onclick="computerRandom()" id="scissorsBtn">Scissors</button>
</div>
this is the stack overflow editor that shos the code this way the format is fine.
i made a function to generate a random image, but it isn't working and I'm not sure why.
答案1
得分: 2
如果我理解正确，您应该将您的 var compRps = Math.floor(Math.random() * compImgs); 更改为 var compRps = Math.floor(Math.random() * compImgs.length);。
正如安迪在评论中所说，您试图将其乘以数组而不是它包含的元素数量。
英文:
If I understand correctly, you should change your var compRps = Math.floor(Math.random() * compImgs); to var compRps = Math.floor(Math.random() * compImgs.length);.
As Andy said in comments, your trying to multiply it by array instead of number of elements it contains.
答案2
得分: 0
你的尝试有很多错误。我为你编写了整个代码并在这里解释。
HTML:
<div class="playerBtn">
<button type="button" onclick="showPRock()" onclick="computerRandom()" id="rockBtn">Rock</button>
<button type="button" onclick="showPPaper()" onclick="computerRandom()" id="paperBtn">Paper</button>
<button type="button" onclick="showPScissors()" onclick="computerRandom()" id="scissorsBtn">Scissors</button>
</div>
<img src="rock1Computer.png" alt="Computer chooses rock!" id="imgrock">
<img src="paper1Computer.png" alt="Computer chooses paper!" id="imgpaper">
<img src="scissors1Computer.png" alt="Computer chooses scissors!" id="imgscissors">
你的HTML基本上是正确的。我还添加了图片路径，假设"rock1Computer.png"，"paper1Computer.png"和"scissors1Computer.png"是实际的路径。
Javascript
function computerRandom() {
var compImgs = ["rock1Computer.png", "paper1Computer.png", "scissors1Computer.png"];
var compRps = Math.floor(Math.random() * compImgs.length);
const showComp = compImgs[compRps];
var showImg = document.getElementById("img" + showComp.split("1")[0]);
showImg.style.display = "block";
}
我们从数组中随机选择一个字符串，然后获取"1"之前的字符（可以是rock、paper或scissors），并将它们显示出来。
CSS:
[id^="img"] {
display: none;
}
我们隐藏之前的img元素。
这个答案应该可以工作。
英文:
Your try has a lot of mistakes. I write out a whole code for you and explain it here.
HTML:
<div class="playerBtn">
<button type="button" onclick="showPRock()" onclick="computerRandom()" id="rockBtn">Rock</button>
<button type="button" onclick="showPPaper()" onclick="computerRandom()" id="paperBtn">Paper</button>
<button type="button" onclick="showPScissors()" onclick="computerRandom()" id="scissorsBtn">Scissors</button>
</div>
<img src = "rock1Computer.png" alt = "Computer chooses rock!"id = "imgrock">
<img src = "paper1Computer.png" alt = "Computer chooses paper!"id = "imgpaper">
<img src = "scissors1Computer.png" alt = "Computer chooses scissors!"id = "imgscissors">
Your html is mostly fine. I also added imgs assuming "rock1Computer.png", "paper1Computer.png" and "scissors1Computer.png" are actual paths
Javascript
function computerRandom(){
var compImgs = ["rock1Computer.png", "paper1Computer.png", "scissors1Computer.png"];
var compRps = Math.floor(Math.random() * compImgs.length);
const showComp = compImgs[compRps];
var showImg = document.getElementById("img" + showComp.split("1")[0]);
showImg.style.display = "block"
};
we take a random string from the array then we take the characters before 1 (either rock paper or scissors) and we make them visible
CSS:
[id^="img"] {
display: none;
}
we hide the img elements from before
This answer should work
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论