Как вывести общую сумму всех трех прокруток от колеса в поле "Доход"?

Question

Хочу создать мини-игру по фин. грамотности с использованием колеса. Принцип работы следующий: пользователь нажимает на Spin, колесо крутится и останавливается на одной из 8 секций с указанной денежной суммой. Далее, в области справа, пользователь выбирает услуги или товары, на которые он потратит эту сумму. После выбора всего необходимого, пользователь нажимает на кнопку "Далее" и переносится на второй месяц, куда подтягивается баланс с первого месяца. Пользователь опять крутит колесо и получает уже новую сумму на этот месяц. Выбранные в предыдущем раунде услуги более неактивны, и пользователь выбирает из того, что осталось. И так 3 раза, то есть, 3 месяца.

Вопрос в следующем: как вывести общую сумму всех трех прокруток от колеса в поле "Доход"?

Знания в JS неполны, потому прошу помощи, или хотя бы подсказки, в каком направлении искать?

let swInner = document.getElementById('sw-inner');
let resultsCard = document.getElementById('spinner-results');
let resetBtn = document.getElementById('sw-btn');
let closeBtn = document.getElementById('sw-close-btn');
let fsmFact = document.getElementById('fsm-fact');
let costsResult = document.getElementById('costs_result');
let balanceResult = document.getElementById('balance_result');
let continueBtn = document.getElementById('continue_btn');
let monthHeadline = document.getElementById('month_headline');
let infoItems = document.querySelectorAll('info_item');
let elem = document.getElementById('elem');
let right = document.getElementById('right');
let canSpin = true;
let myFuncCalls = 0;

document.getElementById('spin').addEventListener('click', function(e) {
  if (canSpin === true) {
    rotateSpinner();
  }

  elem.classList.add('space_between');
  right.classList.add('fade_in');
});


let rotateSpinner = function() {
  let calcDegs = Math.floor((Math.random() * (360)) + 2880);

  // don't let the user spin again while the current spin is active
  canSpin = false;

  //ensure we are set to 0
  swInner.style.transform = 'rotate(0deg)';

  //add our css animation class and rotate the wheel
  setTimeout(function() {
    swInner.classList.add('rotate');
    swInner.style.transform = 'rotate(' + calcDegs + 'deg)';

  }, 200); //setTimeout is used to prevent animation glitches

  // after the spin animation is complete bring in the card with text related to deg match
  setTimeout(function() {
    fsmFact.innerHTML = clacText(calcDegs - 2880);
    swInner.classList.remove('rotate');
    canSpin = true;
  }, 5500);

  for (let i = 0; i < 8; i++) {

    infoNumbers[i].addEventListener('click', function() {

      this.parentElement.classList.remove('active_item');

      return balanceResult.innerHTML = +fsmFact.innerHTML - +costsResult.innerHTML;

    });

  }

  // myFuncCalls++;
  // alert( "I have been called " + myFuncCalls + " times" );
}




//detect where the wheel lands and show text accordingly
let clacText = function(num) {
  if (num === 0 ||
    num === 45 ||
    num === 90 ||
    num === 135 ||
    num === 180 ||
    num === 225 ||
    num === 270 ||
    num === 315 ||
    num === 360) {
    num = num + 1;
  }
  if (num > -22 && num < 22) {
    return '3000';
  } else if (num > 22 && num < 66) {
    return '15000';
  } else if (num > 66 && num < 115) {
    return '2000';
  } else if (num > 115 && num < 157) {
    return '1000';
  } else if (num > 157 && num < 202) {
    return '12000';
  } else if (num > 202 && num < 246) {
    return '10000';
  } else if (num > 246 && num < 290) {
    return '8000';
  } else if (num > 290 && num < 336) {
    return '5000';
  } else {
    return 'Крутити ще';
  }
}

let infoNumbers = document.getElementsByClassName('info_number');

[...document.querySelectorAll(".info_number")].forEach(block => {
  block.addEventListener("click", () => {
    block.classList.toggle("active_number");
    document.querySelector("#costs_result").innerHTML = `${count()}`;
  })
});

function count() {
  return [...document.querySelectorAll(".info_number.active_number")]
    .reduce((a, e) => a + +e.innerHTML, 0);
}


continueBtn.addEventListener('click', function(e) {
  monthHeadline.classList.add('second_month');
  monthHeadline.innerHTML = 'ВТОРОЙ МЕСЯЦ (2/3)';

  this.classList.add('next_stage');

});

section {
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.section_1__wrapper {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  border-radius: 50px;
  background-image: url(../img/bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 100px;
  position: relative;
}

.wheel_game__close {
  position: absolute;
  right: 20px;
  top: 20px;
}

.month {
  margin: 0 0 20px;
}

.month h1 {
  background: linear-gradient(165.58deg, #FFD7A3 5.05%, #D7AF7B 89.77%);
  box-shadow: 10px 10px 15px rgb(24 12 4 / 20%), inset -8px -8px 15px rgb(142 110 69 / 30%), inset 8px 8px 15px #fdf3ac;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  padding: 5px;
}

.elem {
  display: flex;
  justify-content: space-between;
}

.right {
  max-width: 680px;
  width: 100%;
  background: linear-gradient(165.58deg, #FFD7A3 5.05%, #D7AF7B 89.77%);
  box-shadow: 10px 10px 15px rgb(24 12 4 / 20%), inset -8px -8px 15px rgb(142 110 69 / 30%), inset 8px 8px 15px #fdf3ac;
  border-radius: 20px;
  padding: 32px 45px;
}

.info {
  background: #FDF3AC;
  box-shadow: 6px 6px 15px rgb(24 12 4 / 20%);
  border-radius: 20px;
  padding: 27px 27px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.info_item {
  background: #899CBC;
  box-shadow: inset -4px -4px 15px #6882af, inset 4px 4px 10px #b3c3df;
  border-radius: 20px;
  max-width: 230px;
  width: 100%;
  /* height: 100px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #899CBC;
  opacity: .5;
  margin: 0 0 60px;
  font-weight: 900;
  cursor: pointer;
  position: relative;
}

.active_item {
  opacity: 1;
}

.info_item p:first-child {
  font-size: 40px;
}

.info_item p:last-child {
  font-size: 20px;
}

.continue {
  display: flex;
  justify-content: center;
}

.continue a {
  background: linear-gradient(180deg, #F67D72 0%, #E44F42 100%);
  box-shadow: 4px 4px 6px rgb(58 5 5 / 25%), inset -4px -4px 8px rgb(91 5 5 / 15%), inset 4px 4px 8px rgb(255 220 220 / 35%);
  border-radius: 20px;
  width: 100%;
  display: flex;
  max-width: 525px;
  margin: -40px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  font-weight: 900;
  cursor: pointer;
}

.left {
  max-width: 520px;
  width: 100%;
}

.wheel_summaries {
  background: linear-gradient(165.58deg, #FFD7A3 5.05%, #D7AF7B 89.77%);
  box-shadow: 10px 10px 15px rgb(24 12 4 / 20%), inset -8px -8px 15px rgb(142 110 69 / 30%), inset 8px 8px 15px #fdf3ac;
  border-radius: 20px;
  max-width: 425px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: -125px auto 0;
  position: relative;
  z-index: 10;
}

.wheel_summaries h2 {
  background: linear-gradient(180deg, #F67D72 0%, #E44F42 100%);
  box-shadow: 4px 4px 6px rgb(58 5 5 / 25%), inset -4px -4px 8px rgb(91 5 5 / 15%), inset 4px 4px 8px rgb(255 220 220 / 35%);
  border-radius: 20px;
  max-width: 305px;
  width: 100%;
  font-size: 45px;
  font-weight: 900;
  display: flex;
  justify-content: center;
  margin: -30px auto 25px;
  cursor: pointer;
}

.income,
.costs,
.balance {
  max-width: 265px;
  width: 100%;
  margin: 0 auto 10px;
}

.income_title,
.costs_title,
.balance_title {
  font-size: 20px;
  font-weight: 400;
  color: #00153B;
  text-align: center;
}

.income_field,
.costs_field,
.balance_field {
  background: #FFFFFF;
  box-shadow: inset 3px 3px 6px #d7d7d7;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  font-weight: 600;
}

.income_field {
  color: #3FBF2A;
}

.costs_field {
  color: #F17165;
}

.balance_field {
  color: #F17165;
}

.wheel {
  position: relative;
  display: flex;
  justify-content: center;
}

.wheel__inner {
  width: 520px;
  height: 520px;
  position: relative;
  -webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
  -moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
  -o-transition: all 6s cubic-bezier(0, .99, .44, .99);
  -ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
  transition: all 6s cubic-bezier(0, .99, .44, .99);
}

.active_part {
  transform: scale(1.1);
  z-index: 10 !important;
}

.wheel_part__1 {
  position: absolute;
  right: 32%;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  transform: rotate(180deg);
}

.wheel_part__1 p {
  position: absolute;
  bottom: 0;
  transform: rotate(180deg);
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #F3E896;
  z-index: 1;
}

.wheel_part__2 {
  position: absolute;
  right: 23px;
  top: 23px;
  z-index: 1;
}

.wheel_part__2 p {
  position: absolute;
  top: 40px;
  left: 32%;
  right: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #A758FF;
  z-index: 10;
  transform: rotate(45deg);
}

.wheel_part__3 {
  position: absolute;
  right: 25px;
  top: 26%;
  z-index: 1;
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel_part__3 p {
  color: #F3E896;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  z-index: 1;
  transform: rotate(180deg);
}

.wheel_part__4 {
  position: absolute;
  right: 28px;
  bottom: 19px;
  z-index: 1;
  transform: rotate(90deg);
}

.wheel_part__4 p {
  position: absolute;
  top: 40px;
  left: 32%;
  right: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #A758FF;
  z-index: 1;
  transform: rotate(45deg);
}

.wheel_part__5 {
  position: absolute;
  left: 32%;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.wheel_part__5 p {
  color: #F3E896;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  z-index: 1;
  transform: rotate(180deg);
}

.wheel_part__6 {
  position: absolute;
  left: 23px;
  bottom: 23px;
  z-index: 1;
  transform: rotate(180deg);
}

.wheel_part__6 p {
  position: absolute;
  top: 40px;
  left: 32%;
  right: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #A758FF;
  transform: rotate(45deg);
  z-index: 1;
}

.wheel_part__7 {
  position: absolute;
  left: 25px;
  bottom: 26%;
  z-index: 1;
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel_part__7 p {
  position: absolute;
  /* top: 0; */
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #F3E896;
  transform: rotate(180deg);
  z-index: 1;
}

.wheel_part__8 {
  position: absolute;
  left: 28px;
  top: 19px;
  z-index: 1;
  transform: rotate(270deg);
}

.wheel_part__1 img,
.wheel_part__3 img,
.wheel_part__5 img,
.wheel_part__7 img {
  width: 194px;
}

.wheel_part__2 img,
.wheel_part__4 img,
.wheel_part__6 img,
.wheel_part__8 img {
  width: 228px;
}

.wheel_part__8 p {
  position: absolute;
  top: 40px;
  left: 32%;
  right: 0;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: #A758FF;
  transform: rotate(45deg);
  z-index: 1;
}

.wheel_part__arrow {
  position: absolute;
  z-index: 50;
  top: 25%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.rotate_wheel {
  animation: rotate .8s alternate 1 forwards ease-in;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(600deg);
  }
}

#spinner-results {
  color: black;
  border-radius: 4px;
  box-shadow: 0px 0px 124px -10px #c3c3c3;
  background: white;
  width: 100%;
  min-height: auto;
  margin: auto;
  position: absolute;
  top: -48px;
  text-align: center;
  z-index: 25;
  opacity: 1;
  font-size: 30px;
}

.active_number {
  z-index: 0;
}

.active_number:after {
  position: absolute;
  content: '';
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: no-drop;
}

<div id="wheel_game" class="section_1__wrapper">
  <div id="month" class="month">
    <h1 id="month_headline">Первый месяц (1/3)</h1>
  </div>
  <div id="elem" class="elem center">
    <div class="left">
      <div id="wheel" class="wheel spinner-wheel">
        <div id="sw-inner" class="wheel__inner sw-inner">
          <div class="wheel_part wheel_part__1 sec slice">
            <p>3000</p>
          </div>
          <div class="wheel_part wheel_part__2 sec slice">
            <p>5000</p>
          </div>
          <div class="wheel_part wheel_part__3 sec slice">
            <p>8000</p>
            <img src="img/12000_1.png" alt="image">
          </div>
          <div class="wheel_part wheel_part__4 sec slice">
            <p>10000</p>
          </div>
          <div class="wheel_part wheel_part__5 sec slice">
            <p>12000</p>
          </div>
          <div class="wheel_part wheel_part__6 sec slice">
            <p>1000</p>
          </div>
          <div class="wheel_part wheel_part__7 sec slice">
            <p>2000</p>
          </div>
          <div class="wheel_part wheel_part__8 sec slice">
            <p>15000</p>
          </div>
        </div>
      </div>
      <div class="wheel_summaries">
        <h2 id="spin" class="play">SPIN</h2>
        <div class="wheel_summaries__block">
          <div class="income">
            <p class="income_title">ДОХОД</p>
            <div class="income_field">
              <p id="fsm-fact">0</p>
            </div>
          </div>
          <div class="costs">
            <p class="costs_title">Траты</p>
            <div class="costs_field">
              <p id="costs_result">0</p>
            </div>
          </div>
          <div class="balance">
            <p class="balance_title">Баланс</p>
            <div class="balance_field">
              <p id="balance_result">0</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="right" class="right">
      <div class="info">
        <div id="info_btn1" class="info_item active_item">
          <p id="info_btn1__number" class="info_number">3000</p>
          <p class="info_desc">Развлечения</p>
        </div>
        <div id="info_btn2" class="info_item active_item">
          <p id="info_btn2__number" class="info_number">1000</p>
          <p class="info_desc">Спорт</p>
        </div>
        <div id="info_btn3" class="info_item active_item">
          <p id="info_btn3__number" class="info_number">2000</p>
          <p class="info_desc">Здоровье</p>
        </div>
        <div id="info_btn4" class="info_item active_item">
          <p id="info_btn4__number" class="info_number">3000</p>
          <p class="info_desc">Продукты</p>
        </div>
        <div id="info_btn5" class="info_item active_item">
          <p id="info_btn5__number" class="info_number">3500</p>
          <p class="info_desc">Медицина</p>
        </div>
        <div id="info_btn6" class="info_item active_item">
          <p id="info_btn6__number" class="info_number">2500</p>
          <p class="info_desc">Шопинг</p>
        </div>
        <div id="info_btn7" class="info_item active_item">
          <p id="info_btn7__number" class="info_number">4000</p>
          <p class="info_desc">Путешествия</p>
        </div>
        <div id="info_btn8" class="info_item active_item">
          <p id="info_btn8__number" class="info_number">1500</p>
          <p class="info_desc">Такси</p>
        </div>
      </div>
      <div class="continue">
        <a id="continue_btn">Дальше</a>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как вывести общую сумму всех трех прокруток от колеса в поле "Доход"?

Ответы (0 шт):