Question

我在普通的JavaScript中没有回答广泛搜索。我正在构建一个带有动态显示问题和单选按钮选项的测验应用程序。

我无法弄清楚如何链接代码。我想确保用户选择了一个选项，如果他们有选择，然后单击下一个按钮将显示数组中的下一个问题并存储答案。

我已经在我认为代码需要的位置发出警告。

由于

    //store all the questions in an array
    var allQuestions = [{
                        question: "How many legs does a spider have?",
                        choices: [6, 4, 8],
                        correctAnswer:8},
                        {
                        question: "how many legs does a cat have?",
                        choices: [2, 4, 6],
                        correctAnswer:4},
                        {
                        question: "how many legs do you have?",
                        choices: [2, 4, 6],
                        correctAnswer:2
                        }];



    var container = document.getElementById('container')
    var content = document.getElementById('content');
    var questions = document.getElementById('questions');
    var choicesContainer = document.getElementById("choices");
    var scoreContainer = document.getElementById('score');
    var sumitButton = document.getElementById('next');
    var questionHeading = document.getElementById("h2");
    var nextButton = document.getElementById("next"); // next button
    var i = 0;
    //start of quiz
    var currentQuestion = 0;
    var score = 0;
    var questionAsked = true;

    // loop through choices, and create radio buttons

    // function to askQuestion
    showChoices()

    function askQuestion () {
    var askQuestions = allQuestions[currentQuestion].question;
       document.getElementById("question").innerHTML = askQuestions;
    }

    askQuestion()

    // display the iterative choices
            function showChoices() {
                var displayChoices = allQuestions[currentQuestion].choices;
                for (var i = 0; i < displayChoices.length; i++) {
                    var label = document.createElement('label');
                    var input = document.createElement('input');

                    var br = document.createElement('br');

                    input.setAttribute("id", "Radios");
                    input.setAttribute('type', 'radio');
                    input.setAttribute('name', 'answer');
                    input.setAttribute('value', i);

                    label.appendChild(input);
                    label.appendChild(document.createTextNode(displayChoices[i]));

                    container.append(label);

                    container.append(br);
                }
            }

    //select next button
    (function(){

      var myNode = document.querySelector('#next');


      myNode.addEventListener("click", function(e) {

      if(e.target.tagName === 'BUTTON'){

        alert("nextquestion");

      }

      }, false); // item is clicked

    })(); //self executing function


    //check if a radio is checked

    function buttonChecked () {
    var radios = document.getElementsByTagName('answer');
    var value;
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].type === 'radio' && radios[i].checked) {
            // get value, set checked flag or do whatever you need to
            value = radios[i].value;
          }
        }

    }


    // function getRadioInfo() {
    // //get the users radio button answer
    //
    // var e = document.getElementById("choices");
    // var value = e.options[e.selectedIndex].value;
    // var text = e.options[e.selectedIndex].text;
    // // store the users answers in a variable

    <body>

      <div id="container">
        <div id="content"></div>
            <div id="allQuestions"></div>
                <div id="question"></div>
                    <div id="choices"></div>
                        <div id="score"></div>
      </div>

      <button id="next">Next</button>

    </body>

codepen

Answer 1

首先，您要将choices追加到container。它应该是choices.append。

其次，在追加之前，明确选择的内容。

然后，你可以这样做：

if (e.target.tagName === 'BUTTON') {
  currentQuestion++;
  askQuestion()
  showChoices();
}

此外，不应直接调用，而应调用在页面加载时处理DOM的函数

window.addEventListener('load',showQuestion)

注意：我创建了一个包装器来调用两个函数

Sample Fiddle

使用测验按钮显示数组中的下一个选项

1 个答案: