I'm new to javascript and I've created a program that chooses heads or tails at random and has the user click one of two buttons (one labeled heads, the other tails) and it will show whether they guessed correctly and keep track of their wins/losses. I got it to out "You guessed [heads/tails]" but the second half always gives "you are incorrect". Plus it won't show the wins/losses counter.
HTML (file named 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 (file named 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 end
CodePudding user response：
There are two issues.
- flip is equal to zero or one, but never the string you're comparing it against.
if (flip == coin[0])
The fix:
if (coin[flip] == coin[0])
- You need to re-flip the coin, or you'll always be checking against the one and only flip. Simple fix is to add a
reflipfunction and run it before each heads or tails choice.
Demo
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>CodePudding user response：
Your getElementById methods aren't finding any elements because there are no elements with an id of either 'heads' or 'tails'.
try this:
<!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>
CodePudding user response：
The second part of the code is not correctly defined. Interpolation of the variable in a string is a little bit tricky.
The simple single quotes cant replace a variable value in the string, there has to be this type of qoutation (`).
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
CodePudding user response：
There are some little mistakes in your code. First of all you have declared the onClick attribute and you have appended an event listener, only one of both is neccessary. An id attribut was also missing on your input fields. flip was a static value, that wouldn't have changed, but you need a random value each flip, so a function that wraps the random value would be good.
You can also pass an argument each time you call the flipCoin function, either 'heads' or 'tails'. At the end you have used template string, but provided normal ticks ', you have to wrap your string in ``.
Last but not least, I would recommend to use one function flipCoin for both buttons, because in general they are doing the same thing.
let win = 0;
let loss = 0;
const output = document.getElementById('output');
const result = document.getElementById('result');
function flipCoin(chosenValue) {
const coin = ['heads', 'tails'];
const flip = (arr) => {
return arr[Math.floor(Math.random() * arr.length)];
};
if (flip(coin) === chosenValue) {
output.textContent = `You guessed ${chosenValue}, you were correct.`;
win = 1;
} else {
output.textContent = `You guessed ${chosenValue}, you were incorrect.`;
loss = 1;
}
result.textContent = `Wins: ${win} || Losses: ${loss}`;
}<p>Guess heads or tails:</p>
<button id="heads" onclick="flipCoin('heads')">heads</button>
<button id="tails" onclick="flipCoin('tails')">tails</button>
<div id="output"></div>
<div id='result'></div>