CODEWITHSUNDEEP
javascriptarraysfunctionvariables
user3200891
user3200891

Reputation: 33

Issue with Javascript Rock, Paper, Scissors like game

I'm running into an issue where the choice isn't updating at all. I have it laid out where after each selection the last result and current score should show up. Score is working fine but choice isn't updating at all. Thanks. 

<html>
<head>
<title> Dynamic Web </title>
</head>

<body>


<div class="container">

<a class="contents content1">

    <h1>Squirtle, Charmander, Bulbasuar</h1>

    <div class="p-r-s">

        <div class="one_three">

            <h3>Take your pick</h3>

            <ul class="choices">
                <li>
                    <a onclick="compare('Squirtle', computerChoice)">
                        <img src="assets/img/paper.png" width="50px" />
                    </a>
                </li>

                <li>
                    <a onclick="compare('Charmander', computerChoice)">
                        <img src="assets/img/rock.png" width="50px" />
                    </a>
                </li>

                <li>
                    <a onclick="compare('Bulbasuar', computerChoice)">
                        <img src="assets/img/scissors.png" width="50px" />
                    </a>
                </li>
            </ul>

        </div> <!-- one_three -->

        <div>

                <h3>Scores</h3>

                <div class="scores">

                    <div class="score-box">

                        <div id="playerScore"></div><!-- .computerScore -->

                        <span>Player</span>

                    </div><!-- score-box -->

                    <div class="score-box">

                        <div id="computerScore"></div><!-- .computerScore -->

                        <span>Computer</span>

                    </div><!-- score-box -->

            </div><!-- .scores -->

        </div> <!-- two_three -->


        <div>

            <h3>Choices</h3>

            <ul class="decider">

                <li>

                        <span>Player:</span>
                        <span id="playerChoice">Pick one to get started!</span><!-- .playerChoice -->

                </li>

                <li>

                        <span>Computer:</span>
                        <span id="computerChoice">You first!</span><!-- .computerChoice -->

                </li>


            </ul>

        </div>

</div> <!-- .row -->

Javascript

<script type="text/javascript" >

var computerScore = 0
var playerScore = 0

// INSERT SCORES
var playerScoreBox = document.getElementById('playerScore');
var computerScoreBox = document.getElementById('computerScore');

playerScoreBox.innerHTML = computerScore;
computerScoreBox.innerHTML = playerScore;

var playerChoice = document.getElementById('playerChoice');
var computerChoice = document.getElementById('computerChoice')


function compare(choice1, choice2) {

    choice2 = Math.random();
    if (choice2 < 0.34) {
        choice2 = "Charmander";
    } else if(choice2 <= 0.67) {
        choice2 = "Squirtle";
    } else {
        choice2 = "Bulbasuar";
    }

    playerChoice = choice1;
    computerChoice = choice2;


    if (choice1 == choice2) {
        return false;
    }
    if (choice1 == "Charmander") {
        if (choice2 == "Bulbasuar") {

            playerScore++;         
        }
        else {
            computerScore++;
        }
        return updateScores();
    }
    if (choice1 == "Squirtle") {    
        if (choice2 == "Charmander") {
            playerScore++;
        }
        else {
            computerScore++;
        }
        return updateScores();
    }
    if (choice1 == "Bulbasuar") {

        if (choice2 == "Charmander") {
            computerScore++;
        }
        else {
            playerScore++;
        }
        return updateScores();
    }
}

function updateScores() {
    playerScoreBox.innerHTML = playerScore;
    computerScoreBox.innerHTML = computerScore;
}

</script>

Upvotes: 0

Views: 148

Answers (1)

StackSlave
StackSlave

Reputation: 10627

playerChoice = choice1; should be playerChoice.value = choice1; or playerChoice.innerHTML = choice1;, depending if it's an input or not. Same with computerChoice.

Upvotes: 1

Related Questions