My JS code is not working and the content of my two-question form is not displaying inside the centr-CodePudding

Could someone please correct my JS code and tell me what was done in order to do so? I was wondering what did I do wrongly that leads my quiz questions and its alternatives to be not displayable inside the central div.

Contextualising my code: it is a two-questions form and the results of it should be displayed at the top of the page in the afterwards of a click in the Evaluate button, however my focus for now is to understand how one can make the quiz visible in the HTML/CSS page.

Link to CodePen: My code snippet

const quizQuestions = {
    questions = {
      question: "What is the of the state of Pará?",
      alternatives: {
        0: "São Paulo",
        1: "Guarulhos",
        2: "Campinas",
        3: "São Bernardo do Campo",
        4: "São José dos Campos",
        5: "Santo André",
        6: "Ribeirão Preto",
        7: "Belém",
        answer: "7"
      },

      {
        question: "What is the capital of the state of Amapá?",
        alternatives: {
          0: "Osasco",
          1: "Sorocaba",
          2: "Mauá",
          3: "Macapá",
          4 "São José do Rio Preto",
          5: "Mogi das Cruzes",
          6: "Santos",
          answer: "3"
        };

        document.getElementByClassName('.quiz-container ').addEventListener('click', function() {

          let container =
            document.querySelector('.quiz-container');
          container.innerHTML = '<div ></div>';
          for (const [key, value] of Object.entries(quizQuestion.alternatives)) {
            container.innerHTML  = `<input type="radio" name="choice" value="${key}"> ${value}`;
          }
          container.innerHTML  = '<div><button type="submit" id="submit-button">Evaluate</button></div>';



          document.getElementById('submit2').addEventListener('click', function(event) {
            console.log('asdf');
            event.preventDefault();
            var selected = document.querySelector('input[type="radio"]:checked');
            if (selected && selected.value == quizQuestion.answer) {
              alert('It is super, super correct :D!');
            } else {
              alert('Unfortunately, it is incorrect :(!');
            }
          });
        });

body {
  background: rgb(209, 29, 83);
  margin: 0;
}

h1 {
  background: rgb(255, 184, 201);
  height: 60px;
  margin: 0;
  padding-left: 20px;
  padding-top: 20px;
  font-size: 45px;
  text-shadow: 3px 3px 9px;
  color: rgb(43, 29, 14);
}

.quiz-container {
  text-align: left;
  font-size: 25px;
  background: rgb(255, 209, 220);
  width: 700px;
  height: 4000px;
  margin: auto;
  margin-top: 100px;
  box-shadow: 9px 9px 10px;
  margin-bottom: 60px;
}

button {
  margin-left: 900px;
  padding-top: 0;
  margin-bottom: 60px;
}

.questions {
  color: #000000;
  text-align: center;
  font-size: 15px;
}

<head>
  <h1>QUIZ centred in Brazil</h1>
</head>

<body>
  <div class="quiz-container"></div>

  <div>
    <button type="submit" id="submit-button">Evaluate</button>
  </div>

  <script src="js/main.js"></script>
</body>

CodePudding user response：

There's a lot of issues in your code.

The first issue is your quizQuestions are structured wrong. They should be an array of objects, each containing a question, an array of alternatives, and an answer - I have corrected it in the snippet.

The second issue is with how you get the element - unique elements need to have unique ids don't use classes like that - which is why document.getElementByClassName does not exist, because it would be document.getElementsByClassName since classes are not unique like ids are. You also have a ., which is correct for a css selector or for jquery, but is not used in this form of getting - I updated it to use an id, correcting your css to match.

I am not sure how you were trying to do some of what you were doing, but this should be a workable starting point to get you moving again - I didn't include the question checking portion, since this was enough to get the box filled as you asked for.

const quizQuestions = [{
  question: "What is the of the state of Pará?",
  alternatives: [
    "São Paulo",  
    "Guarulhos",
    "Campinas", 
    "São Bernardo do Campo", 
    "São José dos Campos", 
    "Santo André", 
    "Ribeirão Preto", 
    "Belém"
  ],
  answer:7
},{
  question: "What is the capital of the state of Amapá?",
  alternatives: [
    "Osasco", 
    "Sorocaba", 
    "Mauá", 
    "Macapá", 
    "São José do Rio Preto",
    "Mogi das Cruzes", 
    "Santos"
  ], 
  answer:3
}];

window.onload = function (){
  const container = document.getElementById('quiz-container');
  quizQuestions.forEach((question, number) => {
    let questionHTML = `<div ><h3>${question.question}</h3>`;
    question.alternatives.forEach((value, key) => {
      questionHTML  = `<input type="radio" name="${number}choice" value="${key}">${value}<br />`;
    });
    questionHTML  = "</div>";
    container.innerHTML  = questionHTML;
  });
};

body {
  background: rgb(209, 29, 83);
  margin: 0;
}

h1 {
  background: rgb(255, 184, 201);
  height: 60px;
  margin: 0;
  padding-left: 20px;
  padding-top: 20px;
  font-size: 45px;
  text-shadow: 3px 3px 9px;
  color: rgb(43, 29, 14);
}

#quiz-container {
  text-align: left;
  font-size: 25px;
  background: rgb(255, 209, 220);
  width: 700px;
  height: 4000px;
  margin: auto;
  margin-top: 100px;
  box-shadow: 9px 9px 10px;
  margin-bottom: 60px;
}

button {
  margin-left: 900px;
  padding-top: 0;
  margin-bottom: 60px;
}

.question {
  color: #000000;
  text-align: center;
  font-size: 15px;
}

<head>
  <h1>QUIZ centred in Brazil</h1>
</head>

<body>
  <div id="quiz-container"></div>

  <div>
    <button type="submit" id="submit-button">Evaluate</button>
  </div>

  <script src="js/main.js"></script>
</body>