Is there a cleaner way to increment my final scores without referencing the full template literal in-CodePudding

JS beginner here, doing the rock-paper-scissors thing, and i'm trying to increment my final score.

To do this, I've declared my user/ comp scores:

let compScore = 0;
let userScore = 0;

I've got the result display:

 let body = document.querySelector('body');
 let result = document.createElement('div');
 result.className = 'result';
 result.textContent = `YOUR SCORE ${userScore}  :: COMPUTER SCORE  ${compScore}`;
 body.appendChild(result);

I've then did the play and comparison logic:

document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')});

document.querySelector(".paper").addEventListener('click', ()=>{gameRound('Paper')});

document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')});

function compPlay() {
return options[Math.floor(Math.random() * options.length)];
}

function gameRound(userAns, compAns) {

alert(`${userAns}, eyy? Let's see what the computer chose..'`);
userAns= userAns.toLowerCase();
compAns=compPlay().toLowerCase();
alert('Computer answered '   compAns   '.');

if (userAns==compAns) {
alert('Draw');

} else if ((userAns==="rock" && compAns==="scissors") ||
  (userAns==="scissors" && compAns==="paper") ||
  (userAns==="paper" && compAns==="rock")) {
result.textContent = `YOUR SCORE ${userScore =1}  :: COMPUTER SCORE  ${compScore}`;

 } else {
result.textContent = `YOUR SCORE ${userScore}  :: COMPUTER SCORE  ${compScore =1}`;
}
}

Clunky code, (even I know that at this stage!) But I mean, hey it runs!

I was just wondering if there was a cleaner way/ better practice to Increment the user/comp scores, without updating the entire result html class in the if/else statements, as I think i'm struggling with scoping right now. I tried returning:

 compAns    AND  compAns  =1

in the gameRound() function, but wasn't really sure how to get it to increment, as it kept showing 0, presumably because it was just displaying the declared variable in the global scope.

Thank you for your time.

CodePudding user response：

Currently you add the HTML for the scores dynamically, but why not create it in the initial HTML of the page, and insert two span elements where the actual score should be output:

<div>
Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span>
</div>

Now you can target specifically those span elements to output the individual score. Separate the increment of the score from the actual display of it. Something like this:

    } else if (.......) {
        userScore  ;
    } else {
        compScore  ;
    }
    userScoreSpan.textContent = userScore;
    compScoreSpan.textContent = compScore;

Not your question, but if you define the options array as follows:

const options = ["rock", "paper", "scissors"];

... then notice that the value that follows my choice (round robin) will win against me. We can use this in the if condition.

I would also not use alert as after a while it becomes very annoying, but I didn't touch that part. Here is the adapted code:

const options = ["rock", "paper", "scissors"];

let compScore = 0;
let userScore = 0;

let body = document.querySelector('body');
let userScoreSpan = document.getElementById('userscore');
let compScoreSpan = document.getElementById('compscore');

document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')});
document.getElementById("paper").addEventListener('click', ()=>{gameRound('Paper')});
document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')});

function compPlay() {
    return options[Math.floor(Math.random() * options.length)];
}

function gameRound(userAns) {  // should not be a 2nd argument
    let compAns; // define here.
    alert(`${userAns}, eyy? Let's see what the computer chose..'`);
    userAns = userAns.toLowerCase();
    compAns = compPlay().toLowerCase();
    alert('Computer answered '   compAns   '.');

    if (userAns == compAns) {
        alert('Draw');
    } else if (options[(options.indexOf(userAns)   1) % 3] === compAns) {
        compScore  ;
    } else {
        userScore  ;
    }
    userScoreSpan.textContent = userScore;
    compScoreSpan.textContent = compScore;
}

<button id="rock">Rock</button><button id="paper" >Paper</button><button id="scissors">Scissors</button>
<div>
Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span>
</div>