开发者问题收集

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

2022-07-29
59
javascript

请问我想将一些值添加到我的数据结构中作为属性的数组中，但我做错了。请帮忙。下面是我的代码。 

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 />

这是我得到的错误

未捕获的类型错误：无法读取 HTMLInputElement 中未定义的属性（读取“push”）。（questionScript.js:42:28）

2个回答

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

问题 是此代码段是一个数组，可用于包含更多问题，尽管我没有让 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>
m4el
2022-07-29

事件侦听器内部的 this 的值将是作为事件的 currentTarget 的 HTML 元素，因此基本上就是您将事件侦听器附加到的任何内容。 this 不会是您所期望的 questions const。

还有几件事：

您有多个对象属性都尝试使用相同的名称 correctAns ，这是行不通的。answers 中有一个“w”。

dqhendricks
2022-07-29