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

标签 javascript html

我需要创建一个石头剪刀布模拟,用户单击石头、布或剪刀的图片,同一网页上的图像会显示带有形状的手的图片的选择石头、剪刀、布。然后这张图的左边是另一只手,它随机生成这三种形状之一。我有 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";
       }
}

如果在点击事件监听中调用clickRock。

关于javascript - 如何通过一个 onclick 事件更改两个单独的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36997799/

相关文章:

Javascript 函数参数不起作用

javascript - 使用 pdf.js 在浏览器中渲染 JBIG2 图像

javascript - 管理 Web 应用程序中全局需要的服务

javascript - jQuery datetime to_string(iOS html5 日期时间选择器)

javascript - 模糊除 div 元素之外的正文

javascript - Electron/Node -使用require和readFile的代码片段使javascript失败

javascript - 无法通过 JQuery 访问选择框

iphone - 从 HTML 文件链接到 View

javascript - 计时器位置在 JQuery 中显示双倍

html - 一页网站和链接