Проверьте ввод пользователя из HTML-формы с помощью JavaScript без использования фрейма

Я очень новичок в Javascript и HTML. Поэтому я действительно не знаю, как форматировать поисковые запросы в Google, чтобы получить ответ, который я ищу. Однако я попробовал, и у меня есть этот код ниже.

            var buttonClicked = null;
            function freeFormCheck(){
                const answerInput = document.getElementById('answer').value
                let header = document.querySelector("#part2");
                if (answerInput === "Edinburgh"){
                    header.innerText = "Correct answer!";
                }else{
                    header.innerText = "Wrong answer!";
                }
            }
            function validationButton(id){
                if (buttonClicked != null){
                    buttonClicked.style.background = "#d9edff";
                };
                buttonClicked = document.getElementById(id);
                let header = document.querySelector("#part1");
                switch(id){
                    case "correct":
                        buttonClicked.style.background = "green";
                        header.innerText = "Correct answer!";
                        break;
                    case "one":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                    case "two":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                    case "three":
                        buttonClicked.style.background = "red";
                        header.innerText = "Wrong answer!";
                        break;
                }
            }

<!DOCTYPE html>

<html lang = "en">
    <head>
        <link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel = "stylesheet">
        <link href = "styles.css" rel = "stylesheet">
        <title>Trivia!</title>
    </head>
    <body>
        <div class = "header">
            <h1>Trivia!</h1>
        </div>

        <div class = "container">
            <div class = "section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <h3>On average, statistically: how many men die every hour?</h3>
                <h3 id = "part1"></h3>
                <button onClick=validationButton(id) id = "correct">1 per hour</button>
                <button onClick=validationButton(id) id = "one">0.5 per hour ( 1 per 2 hour)</button>
                <button onClick=validationButton(id) id = "two">less than 1 per hour</button>
                <button onClick=validationButton(id) id = "three">0.25 per hour</button>
            </div>

            <div class = "section">
                <h2>Part 2: Free Response</h2>
                <hr>
                <h3>What used to be the capital of Scotland</h3>
                <h3 id = "part2"></h3>
                <form>
                    <lable for = "answer">Enter here:</lable>
                    <input type = "text" id = "answer"><br>
                    <input for = "answer" type = "button" onClick=freeFormCheck()>
                </form>
            </div>
        </div>
    </body>
</html>

Это целый кусок кода, поэтому я перечислю проблему ниже с соответствующим кодом:

Для контекста: я предполагаю задать вопрос, на который пользователь вводит ответ, а затем мне нужно проверить, правильный ли это ответ.

Вот html-часть:

<h3>What used to be the capital of Scotland</h3>
            <h3 id = "part2"></h3>
            <form>
                <lable for = "answer">Enter here:</lable>
                <input type = "text" id = "answer"><br>
                <input for = "answer" type = "button" onClick=freeFormCheck()>
            </form>

А вот Java-скрипт для freeFormCheck():

function freeFormCheck(){
            const answerInput = document.getElementById('answer').value
            let header = document.querySelector("#part2");
            if (answerInput === "Edinburgh"){
                header.innerText = "Correct answer!";
            }else{
                header.innerText = "Wrong answer!";
            }
        }

Итак, насколько я понимаю и согласно некоторым исследованиям Google, document.getElementById().value должен был вернуть и сохранить введенные пользователем данные в константе с именем answerInput.

Тогда это следовало бы сравнить в операторе if.

Я точно знаю, что часть заголовка работает, потому что она работала в другой функции JavaScript.

Кто-нибудь может помочь?

Кажется, код работает как есть. Измените фрагмент, чтобы воспроизвести возникшую ошибку.

— 09.08.2024 06:58

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

— 09.08.2024 12:39

Неважно, это работает. Я закрою вопрос

— 09.08.2024 12:40

javascript html

09.08.2024 02:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть только следующая ошибка:

Вы не добавили ; здесь, в конце строки const answerInput = document.getElementById('answer').value.

Кроме того, я внес некоторые другие незначительные изменения в ваш код:

Исправлена label опечатка: <label for = "answer">Enter here:</label>
Добавлен value = "Submit" во вторую часть формы, чтобы можно было описать кнопку.

Вот ваш полный обновленный код:

<!DOCTYPE html>

<html lang = "en">
  <head>
    <link
      href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
      rel = "stylesheet"
    />
    <link href = "styles.css" rel = "stylesheet" />
    <title>Trivia!</title>
    <script>
      var buttonClicked = null;

      function freeFormCheck() {
        const answerInput = document.getElementById('answer').value;

        let header = document.querySelector('#part2');

        if (answerInput === 'Edinburgh') {
          header.innerText = 'Correct answer!';
        } else {
          header.innerText = 'Wrong answer!';
        }
      }

      function validationButton(id) {
        if (buttonClicked != null) {
          buttonClicked.style.background = '#d9edff';
        }

        buttonClicked = document.getElementById(id);

        let header = document.querySelector('#part1');

        switch (id) {
          case 'correct':
            buttonClicked.style.background = 'green';
            header.innerText = 'Correct answer!';
            break;
          case 'one':
            buttonClicked.style.background = 'red';
            header.innerText = 'Wrong answer!';
            break;
          case 'two':
            buttonClicked.style.background = 'red';
            header.innerText = 'Wrong answer!';
            break;
          case 'three':
            buttonClicked.style.background = 'red';
            header.innerText = 'Wrong answer!';
            break;
        }
      }
    </script>
  </head>
  <body>
    <div class = "header">
      <h1>Trivia!</h1>
    </div>

    <div class = "container">
      <div class = "section">
        <h2>Part 1: Multiple Choice</h2>
        <hr />
        <h3>On average, statistically: how many men die every hour?</h3>
        <h3 id = "part1"></h3>
        <button onClick = "validationButton(id)" id = "correct">1 per hour</button>
        <button onClick = "validationButton(id)" id = "one">
          0.5 per hour ( 1 per 2 hour)
        </button>
        <button onClick = "validationButton(id)" id = "two">
          less than 1 per hour
        </button>
        <button onClick = "validationButton(id)" id = "three">0.25 per hour</button>
      </div>

      <div class = "section">
        <h2>Part 2: Free Response</h2>
        <hr />
        <h3>What used to be the capital of Scotland</h3>
        <h3 id = "part2"></h3>
        <form>
          <label for = "answer">Enter here:</label>
          <input type = "text" id = "answer" /><br />
          <input
            for = "answer"
            type = "button"
            value = "Submit"
            onClick = "freeFormCheck()"
          />
        </form>
      </div>
    </div>
  </body>
</html>

Если вы считаете, что код работает как есть, пожалуйста, проголосуйте за него как таковой.

— 09.08.2024 06:58

@DarkBee, пожалуйста, не голосуйте против, не прочитав весь ответ. В его code есть ошибка, и я это исправил. Хоть это и небольшая ошибка, но в JS она может вызвать серьёзные проблемы.

— 09.08.2024 07:03

Существует конкретная причина опечаток. Вы можете опубликовать ошибку с точкой с запятой в качестве комментария и проголосовать за нее. Более того, значение не является обязательным. Понижающие голоса также предназначены для ответов, которые вы не считаете полезными. Опубликовав ответ на этот вопрос, этот вопрос нельзя будет удалить автоматически после его закрытия.

— 09.08.2024 07:05

09.08.2024 06:53