当我单击此处并存储在数组中时，试图获取按钮的值？知道我做错了什么吗？

Question

我正在尝试能够点击 select div 中的四个按钮之一。 div 是五个之一 - 所以当我单击时我只想检查确切的按钮和正确的 div 受属性更改影响按钮嵌套在 div 中，如下所示。我可以使用事件处理程序来确认我点击了哪个 div 然后使用 if 语句从那里进行控制吗？

我遇到的最后一个问题是我想将内部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 未捕获类型错误：无法读取未定义的属性 'toString' 在 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>

当我单击此处并存储在数组中时，试图获取按钮的值？知道我做错了什么吗？

Trying to get the value of the buttons when i onclick here and store in an array? any idea what im doing wrong?

javascript

typescript

dom-manipulation