Reputation:

How can i display a scores of my JS game in HTML?

Good day to everyone. I get stacked with my js game "Rock, paper, scissors": i need to show the score changes in html. First try: trying to change tag p with js: the problem is that my p is a string, and my score is a num, so the result is NAN i tried to change it with +Score and Number(Score), but it doesn't help. Second try: deleted tag p and add a variables in js, then display it with append and prepend. For now, i see the changes in console , but nothing changes in html.

i will be appreciate for help in two cases, cause i'm just learning.

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.prepend(userScore);
scoreWindow.append(computerScore);

function computerPlay() {
    let computerAction = Math.floor(Math.random() * choises.length);
    computerSelection = choises[computerAction];
    return computerSelection;
}


function playRound(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        userScore = userScore + 1;
        computerScore = computerScore + 1;
        } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
        (playerSelection === choises.rock && computerSelection === choises.rock) ||
        (playerSelection === choises.scissors && computerSelection === choises.paper)) 
        {       userScore = userScore + 1;
    } else {
        computerScore = computerScore + 1;
    }
    return(computerScore, userScore);
}

function doChoises(){
    choises.rock.addEventListener('click', () =>{
        playerSelection = choises[0];
        console.log(computerPlay());
        console.log(playerSelection);
        console.log(playRound(playerSelection, computerSelection));
    });
    choises.paper.addEventListener('click', () =>{
        playerSelection = choises[1];
        console.log(computerPlay());
        playRound();
    });
    choises.scissors.addEventListener('click', () =>{
        playerSelection = choises[2];
        console.log(computerPlay());
        playRound();
     });
}

doChoises();

<body>
    <div class="battlefield">
        <div class="battlefield__back">
            <div class="scores">
                <span>:</span>
            </div>
            
        <div class="battlefield__weapon">
            <button class="rock">
                <img src="./images/rock.png"/>
            </button>
            <button class="paper">
                <img src="./images/paper.png"/>
            </button>
            <button class="scissors">
                <img src="./images/scissors.png"/>
            </button>
        </div>
    </div>
</div>





<script src="./app.js"></script>
</body>

Upvotes: 0

Answers (3)

David Marom

Reputation: 11

Try to write a renderScore(computerScore, userScore) function that changes the DOM element which you already have as a variable, something like that:

function renderScore(computerScore, userScore) {
    scoreWindow.innerText = `${computerScore} : ${userScore}`;
}

Make sure to use the ` sign (backticks) above the tab key.

Upvotes: 0

Sascha A.

Reputation: 4616

You had just delete the 2 lines with prepend and append and insert this line at start and after every game:

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

You can tested it here:

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

function computerPlay() {
    let computerAction = Math.floor(Math.random() * choises.length);
    computerSelection = choises[computerAction];
    return computerSelection;
}


function playRound(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        userScore = userScore + 1;
        computerScore = computerScore + 1;
        } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
        (playerSelection === choises.rock && computerSelection === choises.rock) ||
        (playerSelection === choises.scissors && computerSelection === choises.paper)) 
        {       userScore = userScore + 1;
    } else {
        computerScore = computerScore + 1;
    }
    
    scoreWindow.innerHTML = userScore + ' : ' + computerScore;
    return(computerScore, userScore);
}

function doChoises(){
    choises.rock.addEventListener('click', () =>{
        playerSelection = choises[0];
        console.log(computerPlay());
        console.log(playerSelection);
        console.log(playRound(playerSelection, computerSelection));
    });
    choises.paper.addEventListener('click', () =>{
        playerSelection = choises[1];
        console.log(computerPlay());
        playRound();
    });
    choises.scissors.addEventListener('click', () =>{
        playerSelection = choises[2];
        console.log(computerPlay());
        playRound();
     });
}

doChoises();

    <div class="battlefield">
        <div class="battlefield__back">
            <div class="scores">
                <span>:</span>
            </div>
            
        <div class="battlefield__weapon">
            <button class="rock">
                <img src="./images/rock.png"/>
            </button>
            <button class="paper">
                <img src="./images/paper.png"/>
            </button>
            <button class="scissors">
                <img src="./images/scissors.png"/>
            </button>
        </div>
    </div>
</div>


You had at start and update just this line to insert:

scoreWindow.innerHTML = userScore + ' : ' + computerScore;


<script src="./app.js"></script>

Upvotes: 1

agentp

Reputation: 425

I think you should have 2 DOM elements for userScore and comScore. Then we have

userScoreWindow = document.getElementbyId('userScore')
comScoreWindow = document.getElementbyId('comScore')

Then you would easily show each score on UI by

userScoreWindow.innerHTML = userScore
comScoreWindow.innerHTML = computerScore

Upvotes: 0

How can i display a scores of my JS game in HTML?

Answers (3)

Related Questions