javascript - 根据输赢情况在 div 中显示照片有自己的照片数组。同时使用 JS 和 HTML

Question

我试图在特定的 div 中显示两张照片中的一张。照片应该是获胜条件或失败条件。我遇到的问题是我的 switch 语句是用 javaScript 编写的，而我的 div 显然是 HTML。我的类(class)还没有走到这一步，但我正在尝试添加一些耀斑。我不确定是否有办法在 java 的开关中编写 html，或者是否更容易/可能相反。我将把这两个代码都包含在评论中以供澄清。该代码总共有 5 个案例，但是我应该能够理解我所包含的缩写代码所缺少的内容。

JS:

var pics = new Array("images/chimp.jpg","images/pirateW.png","images/robot.jpg","images/ninja.jpg","images/zombie.jpg");//initial image image 
var win = new Array("images/monkey.jpg","images/pirate.jpg","images/robotW.jpg","images/pickNinja.jpg","images/zombieW.jpg");//winning image
var loss = new Array("images/monkeyL.jpg","images/piratreL.jpg","images/robotL.jpg","images/ninjaL.jpg","images/zombieL.jpg")//loosing image
var pId = new Array("monkeyP", "pirateP", "robotP","ninjaP", "zombieP");//player
var cId = new Array("monkeyC", "pirateC", "robotC","ninjaC","zombieC");//comp

function play(id){
var p_choice=id;
var c_choice=id;
var c_choice=Math.floor(Math.random()*5);

switch(p_choice){
    case 0://monkey
    if(c_choice == 0){
        //both players pick money origional photo displayed
        alert("It's a draw! get on with it");
    }else if(c_choice==1) {
        //computer selected pirate and beats the player
        //is this where I include the code to tell the html to use the proper photo? If so how?
        alert("comp wins");
    }else if(c_choice==4){
        //computer selected zombie and beats the player
        //is this where I include the code to tell the html to use the proper photo?
        alert("comp wins");
    }else if (c_choice==2){
        //computer selected robot and beats the player
        //is this where I include the code to tell the html to use the proper photo?
        alert("you win");
    }else{
        //computer selected ninja and beats the player
        //is this where I include the code to tell the html to use the proper photo?
    }
    break;

//inorder to get the computers photo seperate from the players and display a different image in different div my assumption is that you have to have a second switch however alerts should display in the first switch.
    switch(c_choice){
        case 0://monkey
        if(c_choice == 0){
            //both players pick money original photo displayed
            alert("It's a draw! get on with it");
        }else if(c_choice==1) {
            //computer selected pirate and beats the player
            //is this where I include the code to tell the html to use the  proper photo? If so how?
            alert("comp wins");
        }else if(c_choice==4){
            //computer selected zombie and beats the player
            //is this where I include the code to tell the html to use the 
proper photo?
            alert("comp wins");
        }else if (c_choice==2){
            //computer selected robot and beats the player
            //is this where I include the code to tell the html to use the proper photo?
        alert("you win");
    }else{
        //computer selected ninja and beats the player
        //is this where I include the code to tell the html to use the proper photo?
    }

HTML:

<div class = "player">
            <!-- P = player -->
            <img src="images/chimp.jpg" id = "monkeyP" onclick="play(0);">
            <img src="images/pirateW.png" id = "pirateP" onclick="play(1);">
            <img src="images/robot.jpg" id = "robotP" onclick="play(2);">
            <img src="images/ninja.jpg" id = "ninjaP" onclick="play(3);">
            <img src="images/zombie.jpg" id = "zombieP" onclick="play(4);">
        </div><!-- /.player -->
        <h2 id ="upperName">Player</h2>
        <img src="images/rules.jpg"id = "rules">
        <div class = "playField">
            <h2 id = "choiceP">Player's Choice</h2>

            <div id ="playerResult">
                <!-- need the proper picture to display here -->
                <!--either win or loss for the proper case-->
            </div>
            <div id ="vs">
            <h2>VS.</h2>
            </div>
            <div id = "computerResult">
                <!-- need the proper picture to display here -->
                <!-- either win or loss for the proper case-->
            </div>
            <h2 id = "choiceC">Computer's Choice</h2>
        </div>

        <h2 id = "lowerName">Computer</h2>
        <div class = "computer">
            <!-- c = computer -->
            <img src="images/chimp.jpg" id = "monkeyC" onclick="play(0);">
            <img src="images/pirateW.png" id = "pirateC" onclick="play(1);">
            <img src="images/robot.jpg" id = "robotC" onclick="play(2);">
            <img src="images/ninja.jpg" id = "ninjaC" onclick="play(3);">
            <img src="images/zombie.jpg" id = "zombieC" onclick="play(4);">
        </div><!-- /.computer -->

Answer 1

根据 azb_ 的回答，我相信您还应该考虑解决一些其他问题。 :)

从最基本的开始:

1. 您在“损失”图像数组的末尾缺少分号。
2. 您两次声明“c_choice”。第二个会立即替换第一个，因此您可以完全删除第一个。
3. 您还可以删除“c_choice”的整个开关(如果需要，还可以删除 HTML 中的“onclick”函数)，因为该变量是通过 Math.floor(Math.random()*5) 随机生成的功能。计算机实际上并没有“选择”或“点击”任何东西。

而且如果我理解赢/输的情况，那么您的 javascript 可能会得到简化。

我的意思是，如果猴子总是输(除非与猴子配对平局)，而僵尸总是赢(同样，除非平局)，那么它可以转化为小于/大于。

例如，如果玩家选择猴子(数组位置0)，则没有可能获胜。玩家可以平局(如果 c_choice===0)，也可以输(否则 { alert("lost")})。

所以，

• 如果 (p_choice == c_choice) { alert("DRAW")};
• If (p_choice > c_choice) { alert("PLAYER WINS")};
• If (p_choice < c_choice) { alert("玩家输了")};

假设输赢图像不同，您可以传递变量以显示数组位置中的匹配项。

if (p_choice > c_choice) {
document.GetElementById("playerResult").innerHTML = "<img src=\'" + win(p_choice) + "\'>";
document.GetElementById("computerResult").innerHTML = "<img src=\'" + loss(c_choice) + "\'>";
alert("PLAYER WINS");
}

希望对您有所帮助!