JavaScript При клике по кнопке "Проверить" ожидаю проверку примера, на фигуре. Но вместо одной проверки выполняются проверки по всей фигуре

Рейтинг: 0Ответов: 1Опубликовано: 13.03.2023

Небольшое математическое приложение. При клике на кнопку "Продолжим?" появляется пример. Ввожу в инпут ответ. Первый пример отрабатывает штатно, но остальные два сначала проверяют истинность первого примера. Как избавиться от проверки всех предыдущих примеров.

const container = document.querySelector('.container');
const button = document.getElementById('answer');
const input = document.getElementById('input');
const go = document.getElementById('go');



const text = document.querySelectorAll('text');

let result;
let clickDataset = '0';
let n = 0;

function logic(block) {
  let result = block.dataset.result
  let ball = block.dataset.ball
  console.log(result)
  button.addEventListener('click', () => {
    console.log('Внутри кнопки -', result)
    if (result === input.value) {
      console.log('OK')

    } else {
      console.log('NO!!!!')

    }
  })
}

function startGame() {

  go.addEventListener('click', () => {
    for (let i = 0; i < text.length; i++) {
      if (text[i].classList.contains('current')) {
        text[i].classList.remove('current')
        text[i].classList.remove('text-active')

        if (i + 1 >= text.length) {
          alert('Уровень пройден')
          return
        }

        text[i + 1].classList.add('current')
        text[i + 1].classList.add('text-active')
        logic(text[i + 1]);
        n++
        return
      }
    }
    if (n === 0) {
      text[0].classList.add('current')
      text[0].classList.add('text-active')
      logic(text[0]);
    }
  })

}
startGame()
<section class="container">
  <div class="img">
    <svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
                    .st1{fill:#FFFFFF;stroke:#000000;stroke-width:2;}
                    .st5{fill:#FFFFFF;stroke:#000000;stroke-width:2;}
                    .st6{fill:#FFFFFF;stroke:#000000;stroke-width:2;}
                    .st2{font-family:'Elephant-Regular';}
                    .st3{font-size:48px;}
                    .st4{display:none;}
                </style>

                <switch>

                    <g i:extraneous="self">
                        <g id="sl_1">
                            <path data-ball="3" class="st0" d="M519.83,608.68c0,0,7.66,101.87-16.09,162.38c0,0-43.66,104.94-75.83,137.11c0,0-32.94,22.98-29.11,42.89
                                c0,0,8.43,40.6,57.45-8.43c0,0,69.7-91.91,81.19-176.17c0,0,25.47-146.24,8.36-163.34S519.83,608.68,519.83,608.68z"/>
                            <path data-ball="2" class="st1" d="M406.47,200.43c0,0-33.7-85.79-25.28-120.26c0,0,10.72-45.19,47.49-51.32c0,0,55.91-11.49,81.96,14.55
                                c0,0,18.38,11.49,24.51,24.51c0,0,12.26,9.19,0,55.91l-31.4,82.72L406.47,200.43z"/>
                            <path data-ball="2" class="st1" d="M508.34,206.55l20.48-66.05c0,0,12.84-21.65,30.07-38.88c0,0,26.04-18.38,48.26-6.89
                                c0,0,24.89,8.04,39.83,31.4c0,0,42.89,58.21,34.47,86.55c0,0,0.46,15.48-14.55,30.49c0,0-39.06,33.85-55.91,37.68l-57.45,17.62
                                L508.34,206.55z"/>
                            <path data-ball="2" class="st1" d="M553.53,304.6L586,288.51c0,0,32.25-12.64,38-6.89c0,0,45.85-3.83,58.54,16.85c0,0,24.18,17.62,24.18,58.98
                                c0,0,1.53,65.87-46.72,114.13c0,0-10.72,9.19-33.7,3.06c0,0-36.77-16.85-45.96-32.94l-42.89-44.43L553.53,304.6z"/>
                            <path data-ball="2" class="st1" d="M537.45,402.64l58,61.28c0,0,46.18,53.62,12.47,87.32c0,0-20.68,49.79-88.09,57.45
                                c0,0-58.21,22.98-63.57-73.53V434.81L537.45,402.64z"/>
                            <path data-ball="2" class="st1" d="M447.83,453.19l8.43,81.96c0,0-6.89,80.43-57.45,72.77c0,0-65.11,12.77-109.53-77.1
                                c0,0-17.14-18.54,18.38-54.07l68.94-82.53L447.83,453.19z"/>
                            <path data-ball="2" class="st1" d="M362.04,402.64l-26.81,41.09c0,0-41.36,47.76-72.77,29.37c0,0-65.87-20.68-59.74-106.47
                                c0,0-3.83-62.74,28.34-86.52c0,0,45.19-14.52,74.3,0l44.43,18.35L362.04,402.64z"/>
                            <path data-ball="2" class="st1" d="M344.43,289.28c0,0-61.34-21.28-77.08-25.37c-1.67-0.43-13.71-7.47-17.39-14.38
                                c-5.67-10.61-11.67-28.91-15.82-59.83c0,0,3.06-79.56,87.32-98.76c0,0,21.52-12.46,41.62,21.83c0.68,1.17,1.36,2.39,2.04,3.66
                                c20.65,38.82,47.49,90.11,47.49,90.11L344.43,289.28z"/>
                            <ellipse data-ball="1" class="st5" cx="451.96" cy="320.53" rx="112.6" ry="135.19"/>
                            <path data-ball="3" class="st0" d="M506.04,801.7c0,0-14.72-147.06-166.68-118.72c0,0-34.38,9.57-50.85,26.04c0,0-70.47,66.64-93.45,55.15
                                h-7.66c0,0,71.23,111.83,135.57,119.49c0,0,70.79,16.24,123.32-48.26C446.3,835.4,458.55,810.13,506.04,801.7z"/>
                            <path class="st6" d="M500,797.11c0,0-105.79-57.45-171.66-35.23c0,0-75.06,44.43-135.19,8.04"/>
                            <path data-ball="3" class="st0" d="M517.53,760.34c0,0,29.11-110.3,58.98-131.74c0,0,31.4-38.44,135.57-31.86c0,0,87.32,21.14,109.53-11.8
                                c0,0-45.96,165.17-124.85,197.48c0,0-62.04,25.14-102.64,0C594.13,782.42,537.45,753.28,517.53,760.34z"/>
                            <path class="st0" d="M809.36,602.55c0,0-24.51,60.15-108,76.8c0,0-147.91-4.03-174.64,68.73"/>
                            <text data-result="7" data-ball="1" transform="matrix(1 0 0 1 400 333.9362)" class=" st2 st3">3 + 4</text>
                            <text data-result="8" data-ball="2" transform="matrix(1 0 0 1 470.1251 521.3615)" class="st2 st3">2 + 6</text>
                            <text data-result="9" data-ball="3" transform="matrix(1 0 0 1 583.7488 748.0848)" class="st2 st3">7 + 2</text>
                        </g>
                        <g id="sl_2" class="st4">
                        </g>
                    </g>
                </switch>

            </svg>
  </div>

  <div class="field">
    <h1 class="tite">Давай решать!</h1>
    <div class="form">
      <input type="number" id="input">
      <button id="answer">Проверить</button>
    </div>
    <div class="form2">
      <button id="go">Продолжим?</button>
    </div>
  </div>


</section>

Ответы

▲ 0

Я снял событие клика на кнопку и все разрешилось. Спасибо всем document.getElementById('answer').removeEventListener('click', buttonHandler)