我想将值添加到数组中，并将其用作JavaScript中对象数据结构的属性

Question

我想把一些值添加到一个数组中，作为我数据结构中的属性，但我做得不对。求你了，我需要帮助。贝娄是我的密码。

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);

这是我的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 />

在获取时出现错误

未捕获的类型错误：无法读取未定义的属性(读取"push"(在HTMLInputElement。(questionScript.js:42:28(

Answer 1

正如我在您的示例中看到的，您的JavaScript和HTML有很多拼写错误，无法工作。

questions就是这个片段是一个数组，它可以用来包含更多的问题，尽管我没有让HTML自己编写，但这应该给出它应该如何工作的概念。

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>

Answer 2

事件监听器内部的this的值将是作为事件的currentTarget的HTML元素，所以基本上，无论您将事件监听器附加到什么。this都不会像您预期的那样是questions常量。

还有几件事：

您有多个对象属性都试图使用相同的名称correctAns，这将不起作用。答案中有一个"w"。