I'm very new to Javascript and have made a game of rock paper scissors. The game itself works but is never ending. I have attempted to add varying degrees of difficulty by having different moves allowed per difficulty setting. However I'm now out of ideas on how to do this. I have tried a few different things and am now completely stuck, anything else I seem to try just makes more of a mess. Any help would be appreciated,
Thanks
function selectDifficulty() {
let difficultyRating = ["easy", "normal", "hard"];
let easyMoves = 7;
let normalMoves = 5;
let hardMoves = 3;
if (difficultyRating == "easy") {
movesCounter = easyMoves;
} else if (difficultyRating == "hard") {
movesCounter = hardMoves;
} else movesCounter = normalMoves;
document.getElementById("moves-counter").innerHTML = movesCounter;
} <!-- choose difficulty -->
<div class="difficulty-area">
<h2>Choose Difficulty</h2>
<button onclick="selectDifficulty('easy')" class="btn btn-easy" aria-label="Easy Difficulty">
<p id="easy">Easy</p>
</button>
<button onclick="selectDifficulty('normal')" class="btn btn-normal" aria-label="Normal Difficulty">
<p id="medium">Normal</p>
</button>
<button onclick="selectDifficulty('hard')" class="btn btn-hard" aria-label="Hard Difficulty">
<p id="hard">Hard</p>
</button>
</div>
<!-- moves remaining until game over -->
<div class="moves-remaining">
<p> Moves remaining :
<span id="moves-counter">0</span>
</p>
</div>Your function calls use parameters, but your function definition doesn't catch them.
Add a parameter to the function definition (and remove the now defunct array), and your code works.
function selectDifficulty(difficultyRating) {
let easyMoves = 7;
let normalMoves = 5;
let hardMoves = 3;
if (difficultyRating == "easy") {
movesCounter = easyMoves;
} else if (difficultyRating == "hard") {
movesCounter = hardMoves;
} else movesCounter = normalMoves;
document.getElementById("moves-counter").innerHTML = movesCounter;
} <!-- choose difficulty -->
<div class="difficulty-area">
<h2>Choose Difficulty</h2>
<button onclick="selectDifficulty('easy')" class="btn btn-easy" aria-label="Easy Difficulty">
<p id="easy">Easy</p>
</button>
<button onclick="selectDifficulty('normal')" class="btn btn-normal" aria-label="Normal Difficulty">
<p id="medium">Normal</p>
</button>
<button onclick="selectDifficulty('hard')" class="btn btn-hard" aria-label="Hard Difficulty">
<p id="hard">Hard</p>
</button>
</div>
<!-- moves remaining until game over -->
<div class="moves-remaining">
<p> Moves remaining :
<span id="moves-counter">0</span>
</p>
</div>