Uncaught ReferenceError: variable is not defined? (no jQuery involved)
Question
this is my first question on stackoverflow.
I am learning about javascript and decided to start a project. I'm making a scoreboard to keep track of the score during table tennis. I managed to make this work and decided to add some features like a match history and show which player has to serve. However, I'm stuck with the ReferenceError. In most other questions about this, people just forgot to add the variable or it had something to do with jquery. I don't think that's my problem.
In table tennis the player with serve changes every 2 points. I decided to add scorePlayer1 and scorePlayer2 to make a totalScore. When this is divided by 2, I can check if this is an integer, and if it is, the player with serve changes. However, whatever I try, the variable totalScore is not defined.
I learned HTML/CSS first at w3schools.com and later used it to learn javascript. I have pasted the code into multiple syntax checkers, but got no errors.
The button is there to pick the serve player. Then, I want to swith the right to serve to the opposite player after 2 points are scored. I tried this with function changeServePlayer. However, when I try this in Chrome and type in the console: totalScore, it returns the Uncaught ReferenceError. Why does this happen or is there a better way to achieve the goal?
Here's code I used:
var currentScorePlayerOne = 0; var currentScorePlayerTwo = 0; var currentServePlayer; var totalScore; window.addEventListener("keyup", checkKeyPress); function checkKeyPress(key) { if (key.keyCode == "90" && currentScorePlayerOne != 0) { //Z document.getElementById('scorePlayerOne').innerHTML = --currentScorePlayerOne; changeServePlayer(); changeServeIcon(); } if (key.keyCode == "88") { //X document.getElementById('scorePlayerOne').innerHTML = ++currentScorePlayerOne; changeServePlayer(); changeServeIcon(); } if (key.keyCode == "78" && currentScorePlayerTwo != 0) { //N document.getElementById('scorePlayerTwo').innerHTML = --currentScorePlayerTwo; changeServePlayer(); changeServeIcon(); } if (key.keyCode == "77") { //M document.getElementById('scorePlayerTwo').innerHTML = ++currentScorePlayerTwo; changeServePlayer(); changeServeIcon(); } updateSet(); } function updateSet() { if (currentScorePlayerOne > 10 && currentScorePlayerOne > currentScorePlayerTwo + 1) { resetScores(); } if (currentScorePlayerTwo > 10 && currentScorePlayerTwo > currentScorePlayerOne + 1) { resetScores(); } } function resetScores() { currentScorePlayerOne = 0; currentScorePlayerTwo = 0; document.getElementById('scorePlayerOne').innerHTML = currentScorePlayerOne; document.getElementById('scorePlayerTwo').innerHTML = currentScorePlayerTwo; } function changeServePlayer() { totalScore = currentScorePlayerOne + currentScorePlayerTwo; Number.isInteger(totalScore / 2); if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 1) { currentServePlayer = 2; } if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 2) { currentServePlayer = 1; } } function changeServeIcon() { if (currentServePlayer == 1) { document.getElementById('serveP1').style.opacity = "1"; document.getElementById('serveP2').style.opacity = "0.2"; } else { document.getElementById('serveP2').style.opacity = "1"; document.getElementById('serveP1').style.opacity = "0.2"; } }
<!DOCTYPE html> <html> <head> <script src="Scoreboard1javascript.js"></script> </head> <body> <button type="button" onclick="chooseServingPlayer()"> Serve </button> <script> var randomServeNumber; function chooseServingPlayer() { if (currentScorePlayerOne == 0 && currentScorePlayerTwo == 0) { document.getElementById('serveP1').style.opacity = "0.2"; document.getElementById('serveP2').style.opacity = "0.2"; randomServeNumber = Math.floor(Math.random() * 10); if (randomServeNumber > 5) { currentServePlayer = 1; changeServeIcon(); } else { currentServePlayer = 2; changeServeIcon(); } } } function changeServeIcon() { if (currentServePlayer == 1) { document.getElementById('serveP1').style.opacity = "1"; document.getElementById('serveP2').style.opacity = "0.2"; } else { document.getElementById('serveP2').style.opacity = "1"; document.getElementById('serveP1').style.opacity = "0.2"; } } </script> <nav> <img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP1"> Score P1 </nav> <nav> Score P2 <img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP2"> </nav> <nav id="scorePlayerOne" style="font-size: 50px"> 0 </nav> <nav id="scorePlayerTwo" style="font-size: 50px"> 0 </nav> </body> </html>
1 answers
solution1
0 2020-02-20 10:55:03
I forgot to check which file I was referencing in my html script. I was referencing an old version of the javascript, which made every change I made in javascript useless.
It can be really that stupid sometimes...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.