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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>