根据输赢情况在div中显示照片有其自己的照片阵列。同时使用JS和HTML

Question

我试图在一个特定的div中显示两张照片中的一张。这张照片要么是赢的条件，要么是输球的条件。我遇到的问题是，我的开关语句是用javaScript编写的，而我的div显然是HTML。我的课还没有走到这一步，但我正试着增加一些闪光。我不确定是否有一种方法可以在java的开关中编写html，或者反之亦然。我将包括这两个代码和注释，以澄清。代码共有5种情况，但是我应该能够理解我所包含的缩写代码遗漏了什么。

联署材料：

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

如果我正确理解，您的问题是如何让javascript向html添加一些内容？

尝试在您的javascript代码中使用这个。

document.getElementById("idofyourelement").innerHTML += "YOUR HTML CODE";

在您的例子中，html代码可能是一个图像标记。您不需要在html标记中有任何图像标记。

如果我曲解了就告诉我。

Answer 2

根据azb__的回答，我相信还有几件事情你应该考虑用这个来解决。

从最基本的开始：

1. 在图像“丢失”数组的末尾，您丢失了一个分号。
2. 声明"c_choice“两次。第二个只是立即取代第一个，这样您就可以完全删除第一个。
3. 您还可以删除"c_choice“的整个开关(如果需要，还可以删除HTML中的"onclick”函数)，因为该变量是通过Math.floor(Math.random()*5)函数随机生成的。计算机实际上并不是在“挑选”或“点击”任何东西。

如果--如果--我理解这方面的输赢场景，那么您的javascript可能会被简化。

我的意思是，如果猴子总是输掉(除非和猴子成平手)，僵尸总是赢(除非平局)，那么它可以转化为小于/大于。

例如，如果玩家选择猴子(数组位置0)，则不可能获胜。玩家可以抽签(如果是c_choice===0)，也可以输(否则{警报(“丢失”)})。

所以,

• If (p_choice == c_choice) {警报(“绘图”)}；
• 如果(p_choice > c_choice) {警报(“玩家获胜”)}；
• 如果(p_choice < c_choice) {警报(“玩家输”)}；

假设胜诉损失图像不同，则可以通过变量在数组位置显示匹配项。

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

我希望这能帮上忙！