Как написать текст на HTML из Javascript объекта - PullRequest
Новая
       0

Как написать текст на HTML из Javascript объекта

1 голос
/ 11 апреля 2020

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

Прямо сейчас «вопрос» жестко закодирован HTML (см. ниже в моем коде). Ответ также является жестким кодом в коде JS. В функции JS происходит только сравнение.

В коде JS я определил вопрос и ответ как объект.

Теперь я хотел бы задать вопрос (представлен на веб-странице HTML) и ответьте динамически от объекта JS.

Такое чувство, что я поступаю неправильно. Может быть, есть лучший способ вообще?

Мой HTML Код: 


  <body>
    <link rel="stylesheet" href="./style.css">
    <br>
    <br>
    <h6> What is 2 + 2 ? </h6>
    <br>
    <form action="PayslipServlet" method="get">
          My Answer:    <input type="text" name="ans" id="ans"><br/>
          <br>
          Evaluation of My Answer: <span id="eval"></span>
          <br>
          <!-- <input type="button" class="button" value="Submit" onClick="check_answer()"> -->
          <script type="text/javascript" src="check_answer_v2.js"></script>
          <input type="button" class="button" onclick="check_answer()" value="Submit">
    </form>

    </script>
  </body>

Мой javascript код (check_answer_v2. js) 

var question_answer = {
  question: "What is 2 + 2 ?",
  answer: "4", 
};


function check_answer() {
            given_ans = +document.getElementById('ans').value
            // document.getElementById("eval").innerHTML = typeof given_ans  ; 
            if (given_ans == 4) {
              document.getElementById("eval").innerHTML = 'Correct'  ; 
            } else {
              document.getElementById("eval").innerHTML = 'Incorrect'  ; 
            }
          }

Любой помощь приветствуется!

1 Ответ

1 голос
/ 11 апреля 2020

Ну, вы можете получить доступ к тексту вопроса, используя question_answer.question, и назначить его как h6 innerHTML.

Аналогично для проверки ответа, вы можете получить доступ к нему, используя question_answer.answer. 

//will execute when the page loads
//so that we are sure the h6 did indeed load.
onload = function() {
  document.querySelector('h6').innerHTML = question_answer.question;
}

var question_answer = {
  question: "What is 2 + 2 ?",
  answer: "4", 
};

И, как замечание, у вас есть некоторые опечатки и ошибки разметки (дополнительный символ + в JS и дополнительный закрывающий тег </script> в HTML).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...