I am working on a Yahtzee project and i am trying to put out a bonus of 35 points if the user passes 62 points but it wont seem to add into the total but i do get the alert of it saying “you get a bonus” but it just doesnt show on the actual page
The error im getting is
Uncaught TypeEroor: Cannon read properties of undefined (reading ‘toString’)
at nextRound (145)
at rollDice (99)
at HTMLButtonElement.onclick (347)
let dice = [
{'img': 'Die1.PNG', 'value': 1},
{'img': 'Die2.PNG', 'value': 2},
{'img': 'Die3.PNG', 'value': 3},
{'img': 'Die4.PNG', 'value': 4},
{'img': 'Die5.PNG', 'value': 5},
{'img': 'Die6.PNG', 'value': 6}
]
let userDice =[
{'dice': 0, 'checked': false, 'id': "d1"},
{'dice': 0, 'checked': false, 'id': "d2"},
{'dice': 0, 'checked': false, 'id': "d3"},
{'dice': 0, 'checked': false, 'id': "d4"},
{'dice': 0, 'checked': false, 'id': "d5"},
]
let scorecard = [
{'num':1, 'value' :0, 'area' : "ace1"},
{'num':2, 'value' :0, 'area' : "twos1"},
{'num':3, 'value' :0, 'area' : "threes1"},
{'num':4, 'value' :0, 'area' : "fours1"},
{'num':5, 'value' :0, 'area' : "five1"},
{'num':6, 'value' :0, 'area' : "sixes1"},
]
var turns = 5;
var rollsLeft = 3;
var wins =0;
var losses = 0;
const WINPOINTS=200;
function user(){
//document.getElementById("name").innerHTML= prompt("Enter your name");
}
function rollDice() {
if (rollsLeft > 0) {
for (let i = 0; i < userDice.length; i++) {
if (userDice[i].checked == false)
{
let rDie = Math.floor(Math.random() * 6);
document.getElementById(userDice[i].id).innerHTML = `<img src ="imgs/${dice[rDie].img}" height='50px' width='50px'> `;
userDice[i].value = dice[rDie].value;
}
}
rollsLeft--;
var display = document.getElementById("rollsLeft")
display.innerHTML = rollsLeft;
} else {
nextRound();
for(let j = 0; j < userDice.length; j++)
{
userDice[j].checked = false;
//rollsLeft = 3;
}
}
}
function nextRound(){
let keepDice = 0;
let totalSum= 0;
let roundSum = 0;
let bonus = 35;
if (turns > 0) {
keepDice = prompt("What number do you wish to keep? ");
for (let i = 0; i < userDice.length; i++) {
if (userDice[i].value == keepDice) {
roundSum += userDice[i].value
}
}
scorecard[keepDice - 1].value = roundSum;
document.getElementById(scorecard[keepDice - 1].area).innerHTML = roundSum.toString();
}
else
{
keepDice = prompt("What number do you wish to keep? ");
for (let i = 0; i < userDice.length; i++) {
if (userDice[i].value == keepDice) {
roundSum += userDice[i].value
}
}
scorecard[keepDice - 1].value = roundSum;
document.getElementById(scorecard[keepDice - 1].area).innerHTML = roundSum.toString();
for (let j = 0; j < userDice.length + 1; j++)
{
totalSum += scorecard[j].value;
}
document.getElementById("total1").innerHTML = totalSum.toString();
if (totalSum > 62)
{
totalSum += bonus;
alert("You get a bonus!!")
document.getElementById("bonus1").innerHTML.bonus.toString();
document.getElementById("total1").innerHTML = totalSum.toString();
}
else
{
document.getElementById("bonus1").innerHTML = "0";
}
alert("game over")
}
}
// let wins = document.getElementById("wins");
// let losses = document.getElementById("losses");
// if(wins > WINPOINTS){
// wins++
// }else {
// losses++
// }
$( document ).ready(function() {
resetThings();
console.log( "yo im ready!" );
function resetThings(){
rollDice();
}
$("#reset").click(function() {
alert("reset this");
rollsLeft=3;
var display = document.getElementById("rollsLeft")
display.innerHTML = rollsLeft;
rollDice();
$('input[type=checkbox]:checked').each(function(){
$(this).prop('checked', false);
});
$('input[type=checkbox]:checked').each(function(){
$(this).prop('value', 0);
});
turns--;
document.getElementById("turnsLeft").innerHTML = `${turns}`;
})
$("#d1Check").click(function () {
if (userDice[0].checked) {
userDice[0].checked = false;
} else {
userDice[0].checked = true;
}
})
$("#d2Check").click(function () {
if (userDice[1].checked) {
userDice[1].checked = false;
} else {
userDice[1].checked = true;
}
})
$("#d3Check").click(function () {
if (userDice[2].checked) {
userDice[2].checked = false;
} else {
userDice[2].checked = true;
}
})
$("#d4Check").click(function () {
if (userDice[3].checked) {
userDice[3].checked = false;
} else {
userDice[3].checked = true;
}
})
$("#d5Check").click(function () {
if (userDice[4].checked) {
userDice[4].checked = false;
} else {
userDice[4].checked = true;
} })
})
body{
background-color: #555555;
}
td {
width: 30%;
font-size: small;
}
.col-6{
padding-bottom: 30px;
padding-top: 25px;
color: white;
}
.col-6 span{
color: black;
padding-right: 20px;
}
.resTable span{
padding-left: 20px;
}
.resTable{
border-style: solid;
border-color: black;
border-width: thin;
}
h1 {
margin-bottom: -20px;
}
h1{
font-family: Papyrus;
font-size: 45px;
}
li a {
margin-top: 40px;
margin-left: 20px;
}
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<style>
...
</style>
<script>
</script>
<title>Hello, world!</title>
</head>
<body onload="user()">
<div class ="container-fluid">
<header class=" mb-4 border-bottom border-dark">
<div class="row">
<div class="col-5">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="https://usbrandcolors.com/apple-colors/" class="nav-link active link-dark bg-dark text-light">Color</a>
</li>
</ul>
</div>
<div class="col-6">
<h1><span>Dark</span><img src="imgs/543598.png" width="180"height="80"></h1>
</div>
</div>
</header>
<div class="row">
<div class="col">
<div class="col-9">
PLAYERS NAME: <span id="name"></span>
</div>
<br>
<br>
<table class="resTable table-bordered">
<tbody>
<tr>
<th scope="row">Win points</th>
<td><span id="200">200</span></td>
</tr>
<tr>
<th scope="row">Wins</th>
<td><span id="wins">0</span></td>
</tr>
<tr>
<th scope="row">Losses</th>
<td><span id="losses">0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-4">
<table class="table table-bordered border-dark border border-2 table-sm">
<caption>* if total score is 62 or over <br>** of upper section</caption>
<thead>
<tr>
<th scope="col">UPPER <br>SECTION</th>
<th scope="col">HOW TO <br>SCORE</th>
<th scope="col">GAME <br>#1</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ACE <img src="imgs/Die1.PNG" width="40"height="38" > =1</th>
<td>Count and <br> add only <br>ACES</td>
<td><div id="ace1"></div></td>
</tr>
<tr>
<th scope="row">TWOS <img src="imgs/Die2.PNG" width="40"height="38" > =2</th>
<td>Count and <br> add only <br>TWOS</td>
<td><div id="twos1"></div></td>
</tr>
<tr>
<th scope="row">THREES <img src="imgs/Die3.PNG" width="40"height="38" > =3</th>
<td>Count and <br> add only <br>THREES</td>
<td><div id="threes1"></div></td>
</tr>
<tr>
<th scope="row">FOURS <img src="imgs/Die4.PNG" width="40"height="38" > =4</th>
<td>Count and <br> add only <br>FOURS</td>
<td><div id="fours1"></div></td>
</tr>
<tr>
<th scope="row">FIVES <img src="imgs/Die5.PNG" width="40"height="38" > =5</th>
<td>Count and <br> add only <br>FIVES</td>
<td><div id="five1"></div></td>
</tr>
<tr>
<th scope="row">SIXES <img src="imgs/Die6.PNG" width="40"height="38" > =6</th>
<td>Count and <br> add only <br>SIXES</td>
<td><div id="sixes1"></div></td>
</tr>
<tr>
<th scope="row">3 of a kind</th>
<td>Add total <br> of all dice</td>
<td></td>
</tr>
<tr>
<th scope="row">4 of a kind</th>
<td>Add total <br> of all dice</td>
<td></td>
</tr>
<tr>
<th scope="row">FULL HOUSE</th>
<td>Score 25</td>
<td></td>
</tr>
<tr>
<th scope="row"><b>TOTAL SCORE</b></th>
<td> <img src="imgs/arrow.png" width="60" height="30"></td>
<td></td>
</tr>
<tr>
<th scope="row"><b>BONUS*</b></th>
<td>Add total <br> of all dice</td>
<td><div id="bonus1"></div></td>
</tr>
<tr>
<th scope="row"><b>TOTAL**</b></th>
<td> <img src="imgs/arrow.png" width="60" height="30"> </td>
<td><div id="total1"></div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-4">
<h3>Your Dice</h3>
<form id="shuffle">
<button type="button" class="btn btn-dark" id="rollBtn" onclick="rollDice();">Roll</button>
<button type="button" class="btn btn-dark" id="reset">Reset</button>
<p>Rolls left: <span id="rollsLeft">2</span> Turns Left:<span id="turnsLeft">5</span></p>
</form>
<table class="table table-borderless table-sm table-hover ">
<tr> <td> Save: <input type="checkbox" name='diceCheck' id="d1Check" /> </input> </td>
<td id="d1"> <img src="imgs/Die1.PNG" height="50" width="50"> </td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d2Check" /> </input> </td>
<td id="d2"><img src="imgs/Die2.PNG" height="50" width="50"> </td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d3Check"/> </input> </td>
<td id="d3"> <img src="imgs/Die3.PNG" height="50" width="50"></td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d4Check"/> </input> </td>
<td id="d4"> <img src="imgs/Die4.PNG" height="50" width="50"></td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d5Check"/> </input> </td>
<td id="d5"> <img src="imgs/Die5.PNG" height="50" width="50"></td>
</tr>
</table>
<br>
<br>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>