Question:
This time there was a question to var. How to force a variable to overwrite its value with each new function call? All function code is attached.
function tablecell(){
var st = $(this).attr('id');
console.log(st);
if($(this).is('.disabled')){
}
else{
$('.questionBg').css({'display':'flex'});
function answer(){
if ($(this).is('#true')){
$(this).css({'background':'#83c849'}).css({'color':'#fff'});
$('.answer').addClass('disabled');
$('.disabled').off('click', answer);
$('.teamSelection').css({'display':'flex'});
$('.selectTeam').click(function(){
$(close);
alert(st);
$("#"+st).addClass('disabled');
if($(this).is('.selectTeam1')){
$("#"+st).children('.question').css({'display':'none'});
$("#"+st).children('.team1').css({'display':'block'});
}
else{
$("#"+st).children('.question').css({'display':'none'});
$("#"+st).children('.team2').css({'display':'block'});
}
});
}
else{
$(this).css({'background':'#e03a3a'}).css({'color':'#fff'});
$('.answer').addClass('disabled');
$('.disabled').off('click', answer);
setTimeout(close, 1000);
}
}
}
$('.answer').click(answer);
};
The call is made from outside:
$(document).ready(function(){
$('.tablecell').click(tablecell);
});
I have a feeling that the function does not simply end, but the new value is displayed in the console when called again. However, alert re-displays the previous values each time. What to do – I do not understand. Write in array?
<div class="questionBg">
<div class="questionBlock">
<div class="questionText">
<img src="image/question.png">
Какого цвета этот блок?
</div>
<ul class="answersContainer">
Варианты ответа:
<li class="answer">Синий</li>
<li class="answer">Красный</li>
<li class="answer">Серый</li>
<li class="answer" id="true">Белый</li>
</ul>
<div class="teamSelection">
<div class="selectTeam selectTeam1">
<img src="image/team1.png">
</div>
<div class="selectTeam selectTeam2">
<img src="image/team2.png">
</div>
</div>
<div class="close">
<img src="icons/cross.png">
</div>
</div>
</div>
<section>
<div class="start">
Начать!
</div>
<div class="table">
<div class="tablecell" id="1">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="2">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="3">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="4">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="5">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="6">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="7">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="8">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
<div class="tablecell" id="9">
<img class="question" src="image/question.png">
<img class="team team1"src="image/team1.png">
<img class="team team2" src="image/team2.png">
</div>
</div>
</section>
Answer:
What to do
Do not assign event handlers inside other event handlers.
Each time the tablecell
function is executed, you add a new click
event handler to all elements with class "answer". By clicking on such an element, all accumulated handlers are executed.
(function(){
var st;
function answer(){
...
}
function tablecell(){
st = $(this).attr('id');
console.log(st);
if($(this).is('.disabled')){
} else {
$('.questionBg').css({'display':'flex'});
}
}
$(document).on('click', '.tablecell', tablecell);
$(document).on('click', '.answer', answer);
})();