Проблема с условием для цикла for
Необходимо, чтобы после нажатия на кликабельный div элементы label закрашивались в зелёный цвет если их value равны вопросыОсновнойМассив[НомерТекущегоВопроса]['правильныйОтвет'].
const вопросыОсновнойМассив = [
{варианты: ["Первый", "Второй", "Третий", "Четвёртый",],
правильныйОтвет: 4, },
{vopros: "Какой собаке была поставлена статуя в Центральном парке Нью-Йорка?",
варианты: ["Пятый", "Шестой", "Седьмой", "Восьмой",],
правильныйОтвет: 2,}]
let НомерТекущегоВопроса=0;
document.querySelector('.варики').innerHTML = '';
let номерВарика =1;
for (ОдинОтвет of вопросыОсновнойМассив[НомерТекущегоВопроса]['варианты']) {
const тестоДляОтвета = `<label><input value="%number%" type="radio" name="cheese" id="cheese1" /><div class="текст">Варик</div></label> `.replace('Варик', ОдинОтвет).replace('%number%', номерВарика);
document.querySelector('.варики').innerHTML += тестоДляОтвета.replace('Варик', ОдинОтвет);
номерВарика++;}
document.querySelector('.ответить').onclick = function проверитьОтвет() {
if (!document.querySelector('.варики').querySelector('input[type="radio"]:checked')){ // Выбрал ли пользователь один из вариков
document.querySelector('.ответить').blur();
return};
//Вот этот идиотский цикл
for (var i = 1; parseInt(document.querySelector('.варики').querySelector('input[type="radio"]')[i].value) != вопросыОсновнойМассив[НомерТекущегоВопроса]['правильныйОтвет']; i++) {
document.querySelector('label')[i].style.backgroundColor = 'green';
}
}
.ответить, label {
height: 10vh;
width: 20vw;
color: #F0E68C;
background: #800000;
margin: 1.2vh auto;
border: 4px solid #F0E68C;
border-radius: 5vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
}
.варики {
width: 50vw;
flex-wrap: wrap;
display: flex;
align-content: flex-start;
margin-left: auto;
margin-right: auto;
}
<div class="варики">
<label>
<input value="%number%" type="radio" name="cheese" id="cheese1" /><div class="текст">Варик</div>
</label>
<label>
<input value="%number%" type="radio" name="cheese" id="cheese1" /><div class="текст">Варик</div>
</label>
<label>
<input value="%number%" type="radio" name="cheese" id="cheese1" /><div class="текст">Варик</div>
</label>
<label>
<input value="%number%" type="radio" name="cheese" id="cheese1" /><div class="текст">Варик</div>
</label>
</div>
<div class="ответить"><p class="текст">Ответить</p></div>