Некоторые фрагменты кода выполняются до того, как они должны [дублировать] ⇐ Javascript

[Anonymous]

У меня есть следующая страница:

Код: Выделить всё

const player = document.querySelector("#player")
const computer = document.querySelector("#computer")
const body = document.querySelector("body")
const face = document.querySelector("#face")
const options = document.querySelector("#options")
options.addEventListener("mousedown", (e) => {
let target = e.target
if (target.nodeName === "BUTTON") {
face.setAttribute("src", "rps-cautious.svg")
}
})
body.addEventListener("mouseup", (e) => {
face.setAttribute("src", "rps-smiling.svg")
})
let userInput
let computerChoice
let results
options.addEventListener("click", (e) => {
let target = e.target;
switch (target.id) {
case "Rock":
userInput = 0;
player.textContent = "Rock";
computerInput()
results = (compare(userInput, computerChoice))
break;
case "Paper":
userInput = 1;
player.textContent = "Paper";
computerInput()
results = (compare(userInput, computerChoice))
break;
case "Scissors":
userInput = 2;
player.textContent = "Scissors";
computerInput()
results = (compare(userInput, computerChoice))
break;
}
}, {
once: true
})
console.log(results)

function computerInput() {
computerChoice = Math.floor(Math.random() * 3);
if (computerChoice === 0) {
computer.textContent = "Rock"
} else if (computerChoice === 1) {
computer.textContent = "Paper"
} else {
computer.textContent = "Scissors"
}
return computerChoice
}

function compare(userInput, computerInput) {
if (userInput !== computerInput) {
if (userInput + computerInput !== 2) {
if (userInput > computerInput) {
return 0
} else {
return 1
}
} else if (userInput >  computerInput) {
return 1
} else {
return 0
}
} else {
return 2
}
}

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

body,
html {
height: 100%;
background-color: #c0c0c0;
margin: 20px;
}

#header {
display: flex;
justify-content: center;
border-top: #808080 4px solid;
border-left: #808080 4px solid;
border-right: white 4px solid;
border-bottom: white 4px solid;
}

img {
margin: 10px;
}

#playground {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 75%;
margin: 15px 0;
border-top: #808080 4px solid;
border-left: #808080 4px solid;
border-right: white 4px solid;
border-bottom: white 4px solid;
}

#results,
#options {
display: flex;
flex-direction: row;
justify-content: center;
}

#options {
justify-content: space-around;
}

p {
font-family: "Pixelify Sans", serif;
font-size: 100px;
margin: 0;
}

#options>* {
border-top: #808080 4px solid;
border-left: #808080 4px solid;
border-right: #808080 4px solid;
border-bottom: #808080 4px solid;
margin: 0 20px 20px;
}

div>button {
font-family: "Pixelify Sans", serif;
font-size: 30px;
height: 90px;
width: 150px;
border-top: white 4px solid;
border-left: white 4px solid;
border-right: #808080 4px solid;
border-bottom: #808080 4px solid;
border-radius: 0;
}

Код: Выделить всё

rock paper scissors








[img]rps-smiling.svg[/img]


???
|
???


Rock

Paper

Scissors

Я заметил, что некоторые части кода Javascript (например, console.log (результаты)) запускается раньше, чем должно.
Я пытаюсь сделать так, чтобы оно генерировало только случайное число и сравнивало результаты ПОСЛЕ того, как пользователь нажал кнопку, однако он запускается только перед этим (почему я решил поставить ГСЧ в операторе переключения), почему это происходит?

Подробнее здесь: https://stackoverflow.com/questions/793 ... hey-should