Блог

Главная - Вопросы по программированию - Мой код JS не работает, и содержимое моей формы с двумя вопросами не отображается внутри центрального div. Может кто-нибудь, пожалуйста, исправить мой код JS?

Мой код JS не работает, и содержимое моей формы с двумя вопросами не отображается внутри центрального div. Может кто-нибудь, пожалуйста, исправить мой код JS?

#javascript #html #css

Вопрос:

Не мог бы кто-нибудь, пожалуйста, исправить мой JS-код и рассказать мне, что было сделано для этого? Мне было интересно, что я сделал неправильно, что привело к тому, что мои вопросы викторины и ее альтернативы не отображаются внутри центрального div.

Контекстуализация моего кода: это форма с двумя вопросами, и ее результаты должны отображаться в верхней части страницы после нажатия кнопки «Оценить», однако сейчас я сосредоточен на том, чтобы понять, как можно сделать тест видимым на странице HTML/CSS.

Ссылка на CodePen: Мой фрагмент кода

 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 class="quiz-container"></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 amp;amp; 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>

Комментарии:

1. Похоже, у вас серьезное недопонимание разницы между объектами и массивами в JavaScript. Почему вы выбрали модель quizQuestions в качестве объекта, а не массива? Вы также забыли закрыть свой первый question с помощью закрывающей фигурной скобки } , но вы увидите более неожиданное поведение из-за ваших дублирующих ключей quizQuestions .

2. Отсутствует двоеточие (:) здесь после 4: 4 "São José do Rio Preto",

3. У вас есть 10 открывающих фигурных скобок и только 7 закрывающих фигурных скобок, пары правильно соответствуют вашей функции, поэтому в вашем объявлении const [которое, как сказал @esqew, должно быть в основном массивами, а не всеми объектами] есть 2 закрывающие фигурные скобки, но 5 открывающих.

4. вы действительно хотели иметь контейнер для вопросов размером 4000 пикселей? Я бы предложил разрешить браузеру обрабатывать высоту контейнера и не заставлять людей прокручивать около 4 окон, если они не заполнены.

5. @Andrew Мои представления об измерениях не самые лучшие 🙁 . Это может показаться глупым, но я определил бит 4000px в своем CSS-коде, потому что я был обеспокоен тем, что мой JS-код не подходит.

Ответ №1:

В вашем коде много проблем.

Первая проблема quizQuestions заключается в том, что вы неправильно структурированы. Они должны представлять собой массив объектов, каждый из которых содержит вопрос, массив альтернатив и ответ — я исправил это во фрагменте.

Вторая проблема связана с тем, как вы получаете элемент — уникальные элементы должны иметь уникальные id s, не используйте такие классы — вот document.getElementByClassName почему их не существует, потому что это было document.getElementsByClassName бы так, поскольку классы не уникальны, как идентификаторы. У вас также есть a . , который подходит для селектора css или для jquery, но не используется в этой форме получения — я обновил его, чтобы использовать идентификатор, исправив ваш css для соответствия.

Я не уверен, как вы пытались сделать что — то из того, что вы делали, но это должно быть приемлемой отправной точкой, чтобы вы снова начали двигаться-я не включил часть проверки вопросов, так как этого было достаточно, чтобы заполнить поле, как вы просили.

 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 class="question"><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>
Метки: , , ,