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

Question

I need to create a rock paper scissors simulation where the user clicks on a picture of either a rock, piece of paper or pair of scissors and an image on the same webpage displays the choice with a picture of a hand in the shape of either rock, paper or scissors. Then to the left of this picture is another hand that randomly generates one of these three shapes. I have the onclick event working for the user, however I'm having trouble figuring out how to code the random generator. Here is my code for just one of three functions(rock,paper,scissors), however they are all formatted the same way, just with different values. Thanks in advance.

 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";

       }

    }

Here is my 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>

Answer 1

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";
       }
}

If call clickRock in click event listener.

Answer 2

Its simple use max and min to generate any number of possibilities.

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

alert(getRandomInt(1, 3));

This is a generic function, not just 3 possibility, but n number. Just specify a range as min and max.

Here is a fiddle example

Answer 3

If you assign what Math.random() returns to that variable only once the number won't change. Move that assignment into the function.

To remove the need for less than and more than operators you can do Math.floor(Math.random() * 3) to get a number between 0 and 2. Because you are only doing an equal operation on one variable a switch statement becomes more appropriate.

If you want to make the code even cleaner you can assign the #change2 element to the img variable only once before checking for the the random integer.

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;
    }
}