Displaying photos in a div based on win or loss condition has its own array of photos. Using both JS and HTML

Question

I am trying to display one of two photos in a specific div. The photo should be either for a win condition or a loss condition. The issue that I am running into is that my switch statement is written in javaScript and my div is evidently HTML. My class hasn't got this far yet but I am trying to add some flare. I'm not sure if there is a way to write the html in the switch in java or if it is easier/possible to do it vise versa. I'll include both codes with comments for clarification. The code has 5 total cases however I should be able to understand What I was missing with the abbreviated code I included.

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

Building from azb_'s answer, I believe there are a few more things you should consider addressing with this. :)

Starting with the most basic:

1. You are missing a semicolon at the end of your "loss" array of images.
2. You declare "c_choice" twice. The second just immediately replaces the first so you could remove that first one completely.
3. You can also remove the entire switch for "c_choice" (along with the "onclick" function within your HTML if you wanted), as that variable is randomly generated through your Math.floor(Math.random()*5) function. The computer isn't actually "picking" or "clicking" anything.

And if I'm understanding the win/loss scenario for this, then your javascript could potentially be simplified.

By that, I mean that if monkey always loses (unless paired with monkey for a draw), and zombie always wins (again, unless a draw), then it could translate into less than/greater than.

For example, if the player chooses monkey (array position 0), there is no possible win. Player can either draw (if c_choice===0), or lose (else { alert("lost")}).

So,

• If (p_choice == c_choice) { alert("DRAW")};
• If (p_choice > c_choice) { alert("PLAYER WINS")};
• If (p_choice < c_choice) { alert("PLAYER LOSES")};

Assuming win vs loss images are different, you could pass the variable through to display the matching item in the array position.

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

I hope that helps!

Answer 2

If I understand correctly, your problem is getting the javascript to add something to the html?

Try using this in your javascript code.

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

In your case, the html code would likely be an image tag. You won't need to have any of the image tags in your html tag.

Let me know if I misinterpreted.