Soy nuevo en javascript y he creado un programa que elige cara o cruz al azar y hace que el usuario haga clic en uno de los dos botones (uno etiquetado como cara, el otro cruz) y mostrará si adivinaron correctamente y realizar un seguimiento de sus victorias/derrotas. Tengo que decir "Adivinaste [cara/cruz]", pero la segunda mitad siempre dice "eres incorrecto". Además, no mostrará el contador de ganancias/pérdidas.
HTML (archivo llamado HeadsTails):
<!DOCTYPE html> <html> <head> <title>Project 2</title> </head> <body> <script src = "jasc.js" defer></script> <p>Guess heads or tails:</p> <form name = 'headsTails'> <input type ='button' value = 'heads' onclick = "headsChoice();" /> <input type ='button' value = 'tails' onclick = "tailsChoice();" /> </form> <div id = 'output'></div> </body> </html>Javascript (archivo llamado jasc):
const coin = ['heads', 'tails']; const flip = Math.floor(Math.random() * coin.length); const form = document.forms.headsTails; const output = document.getElementById('output'); const heads = document.getElementById('heads'); heads.addEventListener('click', headsChoice); const tails = document.getElementById('tails'); tails.addEventListener('click', tailsChoice); let win = 0; let loss = 0; function headsChoice(e){ if (flip == coin[0]) { output.textContent = 'You guessed heads, you were correct!'; win++; } //if end else { output.textContent = 'You guessed heads, you were incorrect.'; loss++; } //else end output.textContent = 'Wins: ${win} || Losses: ${loss}'; } //headsChoice end function tailsChoice(e){ if (flip == coin[1]) { output.textContent = 'You guessed tails, you were correct!'; win++; } //if end else { output.textContent = 'You guessed tails, you were incorrect.'; loss++; } //else end output.textContent = 'Wins: ${win} || Losses: ${loss}'; } //tailsChoice endHay dos problemas.
if (flip == coin[0])La solución:
if (coin[flip] == coin[0])reflip y ejecutarla antes de cada elección de cara o cruz.Manifestación
const coin = ['heads', 'tails']; let flip = Math.floor(Math.random() * coin.length); const form = document.forms.headsTails; const output = document.getElementById('output'); const heads = document.getElementById('heads'); heads.addEventListener('click', headsChoice); const tails = document.getElementById('tails'); tails.addEventListener('click', tailsChoice); let win = 0; let loss = 0; function reflip() { flip = Math.floor(Math.random() * coin.length); } function headsChoice(e) { reflip() if (coin[flip] === coin[0]) { output.textContent = 'You guessed heads, you were correct!'; win++; } //if end else { output.textContent = 'You guessed heads, you were incorrect.'; loss++; } //else end output.textContent = 'Wins: ${win} || Losses: ${loss}'; } //headsChoice end function tailsChoice(e) { reflip() if (coin[flip] === coin[1]) { output.textContent = 'You guessed tails, you were correct!'; win++; } //if end else { output.textContent = 'You guessed tails, you were incorrect.'; loss++; } //else end output.textContent = 'Wins: ${win} || Losses: ${loss}'; } //tailsChoice end <p>Guess heads or tails:</p> <form name='headsTails'> <input type='button' value='heads' onclick="headsChoice();" /> <input type='button' value='tails' onclick="tailsChoice();" /> </form> <div id='output'></div>Sus métodos getElementById no encuentran ningún elemento porque no hay elementos con una identificación de 'cara' o 'cruz'.
prueba esto:
<!DOCTYPE html> <html> <head> <title>Project 2</title> </head> <body> <script src = "jasc.js" defer></script> <p>Guess heads or tails:</p> <form name="headsTails"> <input id="heads" type="button" value="heads" onclick="headsChoice();"/> <input id="tails" type="button" value="tails" onclick="tailsChoice();"/> </form> <div id = 'output'></div> </body> </html>La segunda parte del código no está correctamente definida. La interpolación de la variable en una cadena es un poco complicada.
Las comillas simples simples no pueden reemplazar un valor variable en la cadena, tiene que haber este tipo de cita (`).
let win = 0; let loss = 0; function headsChoice(e){ output.textContent = `Wins: ${win} || Losses: ${loss}`; } //headsChoice end function tailsChoice(e){ output.textContent = `Wins: ${win} || Losses: ${loss}`; } //tailsChoice end