JavaScript При клике по кнопке "Проверить" ожидаю проверку примера, на фигуре. Но вместо одной проверки выполняются проверки по всей фигуре
Небольшое математическое приложение. При клике на кнопку "Продолжим?" появляется пример. Ввожу в инпут ответ. Первый пример отрабатывает штатно, но остальные два сначала проверяют истинность первого примера. Как избавиться от проверки всех предыдущих примеров.
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>
Источник: Stack Overflow на русском