Hello everyone, I decided to make a counter for playing table tennis here at my leisure. Tasks that he must perform: - Increase the score when you click on the appropriate button - When you click on the "Party" button, reset the score - Display whose current feed So now, I did the first 2 points, but there is a problem with the third one. In tennis, the serve goes to another player when the score is even, that is, when the player serves 2 feeds, for example, when the score is 2-0, 1-1, 8-6, 7-5, etc. I have 2 ball images that have visibility = 'hidden', and when the bill amount is divided by 2, then they have to change the properties to visibility = 'hidden' and visibility = 'visible' This is how I implemented it:

var $leftScore = document.getElementById('lscore'); var $rightScore = document.getElementById('rscore'); leftSum = 0; rightSum = 0; function lcounter() { $leftScore.innerHTML = ++leftSum;; onUpdate(); } function rcounter() { $rightScore.innerHTML = ++rightSum; onUpdate(); } function reset() { $leftScore.innerHTML = leftSum = 0; $rightScore.innerHTML = rightSum = 0; document.getElementById('lBall').style.visibility = 'visible'; document.getElementById('rBall').style.visibility = 'hidden'; } function onUpdate() { var x = (+leftSum + +rightSum) % 2 == 0; var y = (+leftSum + +rightSum); if ((+leftSum + +rightSum) % 2 == 0) { document.getElementById('lBall').style.visibility = 'visible'; document.getElementById('rBall').style.visibility = 'hidden'; // sum % 2 = 1 } else { document.getElementById('rBall').style.visibility = 'visible'; document.getElementById('lBall').style.visibility = 'hidden'; // sum % 2 = 0 } } 
 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0d3573; color: white; font-size: 40px; } img { width: 100%; } .main { height: 100vh; max-height: 100%; background-position: center; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; } .top, .bottom { display: flex; justify-content: space-around; align-items: center; min-height: 159px; } .bottom { justify-content: space-around; } .section { display: flex; justify-content: center; align-items: center; } .left_score { color: red; background-color: skyblue; width: 80px; height: 80px; text-align: center; } .right_score { color: blue; background-color: skyblue; width: 80px; height: 80px; } .ball { width: 80px; height: 80px; background-color: orange; visibility: hidden; margin: 0 auto; border-radius: 50%; } .ball img { display: block; text-align: center; } button { background-color: antiquewhite; width: 80px; height: 80px; font-size: 40px; } #reset{ font-size: 15px; } #rBall{ padding-right: 10px; } #lBall{ padding-left: 10px; } 
 <div class="main"> <div class="top"> <div class="section left_ball"> <div class="ball" id="lBall" style="visibility:visible"> <div src="img/ball.png" alt="ball"> </div> </div> <div class="section left_score score" id="lscore">0</div> <div class="section right_score score" id="rscore">0</div> <div class="section right_ball"> <div class="ball" id="rBall"> <div src="img/ball.png" alt="ball"> </div> </div> </div> <div class="bottom"> <div class="section left plus" id="leftPlus"> <button id="lbutton" onclick="lcounter()" class="myBtn">+</button> </div> <div class="section reset" id="rightPlus"> <button id="reset" onclick="reset()">партия</button> </div> <div class="section right plus" id="rightPlus"> <button id="rbutton" onclick="rcounter()" class="myBtn">+</button> </div> </div> </div>

But the problem is that the properties change with each increase in the score, and not just when the score is divided by 2. I think there is a little wrong logic here. 2nd day I can’t figure out how to properly implement this moment :( This is the page

  • I am not strong in tennis. When should the feed change? When is the total score even? Or write in more detail the algorithm. - Stepan Kasyanenko
  • The submission must change when one player has submitted 2 submissions, that is, when the score is divided by 2, for example: 2-0, 1-1, 3-1, 8-2 - Artem Chepeliuk
  • Please provide a working snippet in your question, so that at its base you can give an answer. - Stepan Kasyanenko
  • I need that when the account is changed, blocks with balls are shown or broken depending on the account, if the sum of the account is even then one ball disappears and the other appears. There is an Update () function that changes the visibility of the blocks, but it changes the pr and each account increase, and should only change when the account is increased by 2 - Artem Chepeliuk
  • The code was added, they immediately responded to you) - Stepan Kasyanenko

3 answers 3

In your example, either if or else always works. Therefore, the ball appears all the time, because the number is either even or not. And you need to change the display only if the number is divisible by 2 at once for both div .

 var $leftScore = document.getElementById('lscore'); var $rightScore = document.getElementById('rscore'); var leftBall = document.getElementById('lBall'); var rigthBall = document.getElementById('rBall'); leftSum = 0; rightSum = 0; function lcounter() { $leftScore.innerHTML = ++leftSum; onUpdate(); } function rcounter() { $rightScore.innerHTML = ++rightSum; onUpdate(); } function reset() { $leftScore.innerHTML = leftSum = 0; $rightScore.innerHTML = rightSum = 0; document.getElementById('lBall').style.visibility = 'visible'; document.getElementById('rBall').style.visibility = 'hidden'; } function onUpdate() { if ((+leftSum + +rightSum) % 2 === 0) { leftBall.style.visibility = leftBall.style.visibility == "visible" ? "hidden" : "visible"; rigthBall.style.visibility = rigthBall.style.visibility == "hidden" ? "visible" : "hidden"; } } 
 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0d3573; color: white; font-size: 40px; } img { width: 100%; } .main { background-image: url('/img/tabl.jpg'); background-size: cover; height: 100vh; max-height: 100%; background-position: center; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; } .top, .bottom { display: flex; justify-content: space-around; align-items: center; min-height: 159px; } .bottom { justify-content: space-around; } .section { display: flex; justify-content: center; align-items: center; } .left_score { color: red; background-color: skyblue; width: 80px; height: 80px; text-align: center; } .right_score { color: blue; background-color: skyblue; width: 80px; height: 80px; } .ball { max-width: 80px; height: auto; visibility: hidden; margin: 0 auto; } .ball img { display: block; text-align: center; } button { background-color: antiquewhite; width: 80px; height: 80px; font-size: 40px; } #reset{ font-size: 15px; } #rBall{ padding-right: 10px; } #lBall{ padding-left: 10px; } 
 <div class="main"> <div class="top"> <div class="section left_ball"> <div class="ball" id="lBall" style="visibility: hidden;"> <img src="img/ball.png" alt="ball"> </div> </div> <div class="section left_score score" id="lscore">17</div> <div class="section right_score score" id="rscore">0</div> <div class="section right_ball"> <div class="ball" id="rBall" style="visibility: visible;"> <img src="img/ball.png" alt="ball"> </div> </div> </div> <div class="bottom"> <div class="section left plus" id="leftPlus"> <button id="lbutton" onclick="lcounter()" class="myBtn">+</button> </div> <div class="section reset" id="rightPlus"> <button id="reset" onclick="reset()">партия</button> </div> <div class="section right plus" id="rightPlus"> <button id="rbutton" onclick="rcounter()" class="myBtn">+</button> </div> </div> </div>

  • thanks a lot, everything works)) - Artem Chepeliuk
  • Well, if everything suits you, please accept the answer) - Lukas

 var players = [0 , 0]; var i = 0; function podacha() { let rand = Math.random(); let random = Math.round(rand); i++; players[random]++; //alert(players); document.getElementById('first').innerHTML = ""; document.getElementById('first').innerHTML = players[0]; document.getElementById('second').innerHTML = ""; document.getElementById('second').innerHTML = players[1]; if(i%2 == 0) { var a1 = document.getElementById('FIrst'); a1.classList.toggle('class1'); var a2 = document.getElementById('SEcond'); a2.classList.toggle('class1'); } } 
 .class1 { display: none; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <button id="podacha" onclick="podacha()">сюда!!</button> <span id="first">0</span> : <span id="second">0</span> <br> <span id="FIrst">подает первый</span> <br> <span id="SEcond" class="class1">подает второй</span> <script src="script.js"></script> </body> </html>

I have a problem with inventing variable names, but you will understand

  • the code works, but not as much as I need.

 var $leftScore = document.getElementById('lscore'); var $rightScore = document.getElementById('rscore'); var leftBall = document.getElementById('lBall'); var rigthBall = document.getElementById('rBall'); leftSum = 0; rightSum = 0; function lcounter() { $leftScore.innerHTML = ++leftSum; onUpdate(); } function rcounter() { $rightScore.innerHTML = ++rightSum; onUpdate(); } function reset() { $leftScore.innerHTML = leftSum = 0; $rightScore.innerHTML = rightSum = 0; document.getElementById('lBall').style.visibility = 'visible'; document.getElementById('rBall').style.visibility = 'hidden'; } function onUpdate() { if ((+leftSum + +rightSum) % 2 === 0) { document.getElementById('lBall').classList.toggle("hide"); document.getElementById('rBall').classList.toggle("hide"); } } 
 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0d3573; color: white; font-size: 40px; } img { width: 100%; } .main { background-image: url('/img/tabl.jpg'); background-size: cover; height: 100vh; max-height: 100%; background-position: center; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; } .top, .bottom { display: flex; justify-content: space-around; align-items: center; min-height: 159px; } .bottom { justify-content: space-around; } .section { display: flex; justify-content: center; align-items: center; } .left_score { color: red; background-color: skyblue; width: 80px; height: 80px; text-align: center; } .right_score { color: blue; background-color: skyblue; width: 80px; height: 80px; } .ball { max-width: 80px; height: auto; margin: 0 auto; } .ball img { display: block; text-align: center; } button { background-color: antiquewhite; width: 80px; height: 80px; font-size: 40px; } #reset{ font-size: 15px; } #rBall{ padding-right: 10px; } #lBall{ padding-left: 10px; } .hide { visibility: hidden; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="main"> <div class="top"> <div class="section left_ball"> <div class="ball" id="lBall"> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Small-city-symbol.svg" alt=""> </div> </div> <div class="section left_score score" id="lscore">0</div> <div class="section right_score score" id="rscore">0</div> <div class="section right_ball"> <div class="ball hide" id="rBall"> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Small-city-symbol.svg" alt=""> </div> </div> </div> <div class="bottom"> <div class="section left plus" id="leftPlus"> <button id="lbutton" onclick="lcounter()" class="myBtn">+</button> </div> <div class="section reset" id="rightPlus"> <button id="reset" onclick="reset()">партия</button> </div> <div class="section right plus" id="rightPlus"> <button id="rbutton" onclick="rcounter()" class="myBtn">+</button> </div> </div> </div> <script src="script.js"></script> </body> </html>