Скрипт четной и не четной суммы чисел

154

15 апреля 2019, 19:10

Всем привет, решил тут на досуге сделать счетчик для игры в настольный тенис. Задачи которые он должен выполнять: - Увеличивать счет при нажатии на соответствующую кнопку - При нажатии на кнопку "Партия" обнулять счет - Отображать чья сейчас подача Так вот, первых 2 пункта я сделал, а вот с третьим есть проблема. В тенисе подача переходит к другому игроку когда счет четный, тоесть когда игрок подаст 2 подачи, например когда счет 2-0, 1-1, 8-6, 7-5 и т.д. У меня есть 2 картинки шарика у которых visibility = 'hidden', и когда сумма счета делиться на 2 то менять у них свойства на visibility = 'hidden'и visibility = 'visible' Вот как я это реализовал:

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>

Но проблема в том, что свойства меняються при каждом увеличении счета, а не только когда счет делиться на 2. Я думаю тут немного неправильная логика. 2й день не могу придумать как правильно реализовать этот момент :( Вот страница

Answer 1

В вашем примере всегда срабатывает или if или else. Потому и шарик все время появляется, так как число либо четное, либо нет. А вам надо менять отображение только если число делиться на 2 сразу у обоих 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>

Answer 2

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>

с придумыванием именами переменных у меня проблемы, но ты разберешся

Answer 3

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

serializeArray внутри each

Сообственно возможно ли перебрать через $each несколько форм (id = load1, id = load2

158

javascript

Как создать кнопку в плагине media редактора Tinymce?

Как создать кнопку в модальном окне плагина model редактора Tinymce? Во многих источниках показывают как создать плагин и после кнопку, а так же все...

152

javascript

Как сделать поля логина и пароля автозаполняемыми?

Есть форма, но при добавлении ей атрибута autocomplete="on" автозаполнения при повторном посещении страницы не происходитПодскажите, что не так

135

javascript

Как извлечь из списка с несколькими уровнями вложенности нужный элемент при условии что на первом уровне значение элемента совпадает с определенным?

Как при клике на кнопку обойти весь список, найти в этом списке тот элемент у которого текст совпадает со значением в кнопке?

161