如何通过一个onclick事件更改两个单独的图像

How can I change two separate images using through one onclick event?

本文关键字：两个 单独 图像 onclick 何通过 一个 事件      更新时间：2023-09-26

我需要创建一个石头剪刀模拟，用户点击一块石头、一张纸或一把剪刀的图片，同一网页上的一张图片会显示选择，并显示一只石头、纸或剪刀形状的手的图片。然后在这张图片的左边是另一只手，它随机生成这三个形状中的一个。我让onclick事件为用户工作，但是我很难弄清楚如何对随机生成器进行编码。这是我为三个函数（石头、纸、剪刀）中的一个函数编写的代码，但它们的格式都是相同的，只是值不同。提前谢谢。

 var computerChoice=Math.random();

 function clickRock(computerChoice) {
       img= document.getElementById("change1");
       img.src="leftRockHand.jpg";
       if (computerChoice < 0.3333) {
            img=document.getElementById("change2");
            img.src="rightRockHand.jpg"
       }
       else if (computerChoice >= 0.3333 && computerChoice < 0.6666) {
            img=document.getElementById("change2");
            img.src="rightPaperHand.jpg";
       }
       else if(computerChoice >= 0.6666) {
            img=document.getElementById("change2");
            img.src="rightScissorHand.jpg";
       }
    }

这是我的html

<tr>
            <td onclick="clickRock()" id="rockClick"><img src="rock.jpg"     alt="Rock"></td>
            <td rowspan="3"><img id="change1" src="leftPaperHand.jpg" alt="Left Hand" height="350"></td>
            <td rowspan="3"><img id="change2" src="rightRockHand.jpg" alt="Right Rock" height="350"></td>
        </tr>

function clickRock(choice1, choice2){
       changePicture("change1", choice1);
       changePicture("change2", choice2);
} 
function changePicture(eleId, computerChoice) {
       var img = img=document.getElementById(eleId);
       if (computerChoice < 0.3333) {
            img.src="rightRockHand.jpg"
       } 
       else if (computerChoice >= 0.3333 && computerChoice < 0.6666) {
            img.src="rightPaperHand.jpg";
       }
       else if(computerChoice >= 0.6666) {
            img.src="rightScissorHand.jpg";
       }
}

如果在click事件监听器中调用clickRock。

如果只将Math.random（）返回的值分配给该变量一次，则数字不会改变。将该赋值移到函数中。

为了消除对小于和大于运算符的需要，您可以使用Math.floor（Math.random（）*3）来获取0到2之间的数字。因为您只对一个变量执行相等的运算，所以switch语句变得更合适。

如果你想让代码更干净，你可以在检查随机整数之前，只将#change2元素分配给img变量一次。

function clickRockAsComputer() {
    var computerChoice = Math.floor(Math.random() * 3);
    img = document.getElementById("change1");
    img.src = "leftRockHand.jpg";
    img = document.getElementById("change2");
    switch(computerChoice){
        case 0:
            img.src = "rightRockHand.jpg";
        break;
        case 1:
            img.src = "rightPaperHand.jpg";
        break;
        case 2:
            img.src = "rightScissorHand.jpg";
        break;
    }
}

它简单地使用max和min来生成任意数量的可能性。

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
alert(getRandomInt(1, 3));

这是一个通用函数，不仅有3种可能性，还有n个数。只需指定最小和最大范围

这是一个小提琴的例子

相关文章：