Пытаетесь получить значение кнопок, когда я нажимаю здесь и сохраняю в массиве? есть идеи, что я делаю не так?

Question

Я пытаюсь щелкнуть и выбрать одну из четырех кнопок внутри div. Div является одним из пяти - поэтому, когда я нажимаю, я хочу только проверить точную кнопку и правильный div, на который будут влиять изменения атрибутов. Кнопки вложены внутри div, как показано здесь. Могу ли я использовать обработчик событий, чтобы подтвердить, какой div я нажимаю, а затем использовать оператор if для управления оттуда?

Последняя проблема, с которой я столкнулся, заключается в том, что я хочу передать sh внутренний HTML в массив, чтобы затем проверить, но я продолжаю получать неопределенную ошибку

HTML ..........

 <div class="rightMain" id="q1box">
   <div class="answerButtonBox">
   <button type="button" class="answerButton" id="q1A" value="1">The Marauder</button>
   </div>
   <div class="answerButtonBox">
   <button type="button" class="answerButton" id="q1B" value="2">The Black Pearl</button>
   </div>
 </div>

Typescript / JS ....

    var userGuess:[{}];       ///can i just initilize an array and then push the innerhtml into it?
    var answers: [{}];


    question1.addEventListener("click", checkq1)

    function checkq1(){
    if (first.onclick)
    {
        first.setAttribute("style", "background-color: yellow;")
        second.setAttribute("style", "background-color: grey;")
        third.setAttribute("style", "background-color: grey;")
        fourth.setAttribute("style", "background-color: grey;")
        userGuess.push(first.innerHTML)
    }
    if (second.onclick)
    {
        first.setAttribute("style", "background-color: grey;")
        second.setAttribute("style", "background-color: yellow;")
        third.setAttribute("style", "background-color: grey;")
        fourth.setAttribute("style", "background-color: grey;")
        userGuess.push(second.innerHTML)
    }

etc..... 

Любая помощь будет принята с благодарностью!

ошибка, которую я получаю в отношении моего массива ....

index.ts: 59 Uncaught TypeError: Cannot read property ' toString 'из undefined в HTMLDivElement.checkq1 (index.ts: 59)

Answer 1

Вы можете получить все невыбранные ответы и получить за них css, надеюсь, это поможет

const answerBtn = document.getElementsByClassName('answerButton');
for (var i = 0; i < answerBtn.length; i++) {
    answerBtn[i].addEventListener('click', getAnswer, false);
}
function getAnswer() {
    const selectAnswer = this;
    selectAnswer.setAttribute('style', 'background-color: yellow;');
    const parent = this.parentElement.parentElement;
    const notSelectedAns = [];
    for (i = 0; i < parent.children.length; i++) {
        if (parent.children[i].firstElementChild !== selectAnswer) {
            notSelectedAns.push(parent.children[i].firstElementChild);
        }
    }
    for (i = 0; i < notSelectedAns.length; i++) {
        notSelectedAns[i].setAttribute('style', 'background-color: grey;');
    }
}

<div class="rightMain" id="q1box">
 <div class="answerButtonBox">
 <button type="button" class="answerButton" id="q1A" value="1">The Marauder</button>
 </div>
 <div class="answerButtonBox">
 <button type="button" class="answerButton" id="q1B" value="2">The Black Pearl</button>
 </div>
<div class="answerButtonBox">
 <button type="button" class="answerButton" id="q1C" value="3">The Black Pearl</button>
 </div>
<div class="answerButtonBox">
 <button type="button" class="answerButton" id="q1D" value="4">The Black Pearl</button>
 </div>
</div>