I’m a novice to Javscript DOM
and try making a Rock Paper Scissors Game
. In that game, I want to customize the onclick
event that I’m the person who can decide and click on both options among paper, scissors, or rock
.
In game.html
I have 3 options as 3 button events for each paper, rock, and scissors
<div class="decisions">
<input
class="options"
type="image"
disabled="true"
src="./assets/rock.svg"
value="Rock"
/>
<input
class="options"
disabled="true"
type="image"
src="./assets/paper.svg"
value="Paper"
/>
<input
class="options"
type="image"
disabled="true"
src="./assets/scissors.svg"
value="Scissors"
/>
</div>
main.js
const options = document.querySelectorAll(".options")
const startGame = () => {
// list of options
const _options = ["Rock", "Paper", "Scissors"]
options.forEach(option => {
option.addEventListener("click", function () {
// this is my turn
let hInput = this.value
// this is random turn for computer, but I want to to make this turn
// by myself
let cInput = _options[Math.floor(Math.random() * 3)]
if (hInput && cInput) {
updateScore(hInput, cInput)
compareInputs(hInput, cInput)
}
})
})
}
How do I separate the addEventListender
to make 2 different turns by myself?