我想将值添加到我用作 JavaScript 中 object 数据结构中的属性的数组中

Question

please i want to add some values into an array i have as property in my data structure but i wasn't getting it right. pls i need help. bellow is my code.

 const Question1 = document.querySelector('.qestion1').textContent;
const Option1 = document.querySelectorAll('input[name="option1"]');
const Question2 = document.querySelector('.qestion2').textContent;
const Option2 = document.querySelectorAll('input[name="option2"]');
const Question3 = document.querySelector('.qestion3').textContent;
const Option3 = document.querySelectorAll('input[name="option3"]');
const Question4 = document.querySelector('.qestion4').textContent;
const Option4 = document.querySelectorAll('input[name="option4"]');
const btn = document.querySelector('.btn');

const questions = {
  question1: Question1,
  correctAns: 'javaScript',
  question2: Question2,
  correctAns: 'CSS',
  question3: Question3,
  correctAns: 'Python',
  question4: Question4,
  correctAns: 'Html',
  choosenAnsers: [],
  getAns(Option) {
    Option.forEach(function (opt1) {
      opt1.addEventListener('click', function (e) {
        const chosenAns = e.target.value;

        this.choosenAnsers.push(chosenAns);
      });
    });
  },
};

console.log(questions.question1);
questions.getAns(Option1);

here is my Html

<p class="qestion1">Q1: What is your favorite programming language</p><br />

    <input type="radio" name="option1" value="javaScript" id="A1" />
    <label for="A1"> A: javaScript</label><br />
    <input type="radio" name="option1" value="Python" id="B1" />
    <label for="B1"> B: Python</label><br />
    <input type="radio" name="option1" value="Rust" id="C1" />
    <label for="C1"> C: Rust</label><br />
    <input type="radio" name="option1" value="C++" id="D1" />
    <label for="D1"> D: C++</label><br />

and there is the error am getting

Uncaught TypeError: Cannot read properties of undefined (reading 'push') at HTMLInputElement. (questionScript.js:42:28)

Answer 1

the value of this inside of an event listener is going to be the HTML element that is the event's currentTarget , so basically whatever you attached the event listener to. this will not be the questions const as you seem to expect.

A few more things:

you have multiple object properties all trying to use the same name correctAns , which will not work. answers has a 'w' in it.

Answer 2

As I`ve seen in you examples your JavaScript and your HTML has a lot of typos, and would not work.

The questions is this snippet is an array, that can be used to have more questions in it, and although I did`nt make the HTML write itself, this should give a concept of how it should work.

 const questions = [ { question: "Q1: What is your favorite programming language", name: 'question1', options: [ 'JavaScript', 'Python', 'Rust', 'C++' ], correct: 'JavaScript', isCorrect: function () { var radios = document.getElementsByName('question1'); for (let i = 0, length = radios.length; i < length; i++) { if (radios[i].checked && radios[i].value == this.correct) { return true; } } return false; } }, ]; function confirmChoices() { for (let i = 0; i < questions.length; i++) { console.log(questions[i].isCorrect()); } }

 <p class="qestion1">Q1: What is your favorite programming language</p> <br /> <input type="radio" name="question1" value="JavaScript" id="A1" /> <label for="A1"> A: JavaScript</label><br /> <input type="radio" name="question1" value="Python" id="B1" /> <label for="B1"> B: Python</label><br /> <input type="radio" name="question1" value="Rust" id="C1" /> <label for="C1"> C: Rust</label><br /> <input type="radio" name="question1" value="C++" id="D1" /> <label for="D1"> D: C++</label><br /> <button onclick="confirmChoices()">Confirm</button>