Тест Javscript: Кажется, я не могу сохранить оценку пользователя

#javascript #html

#javascript #HTML

Вопрос:

У меня есть рабочий тест javascript. Цель состоит в том, чтобы сохранить оценку пользователя.

Итак, это то, что у меня есть. В конце теста (quiz.html ), появится оповещение и покажет оценку пользователя (это работает нормально). После закрытия окна предупреждения появится новое окно, complete.html , появится (это тоже работает).

 var score = 0; // Default score is 0

if (questionIndex >= questions.length) {
  alert("End of quiz! You scored "   score   " points!"); // alert user that time is up
  window.open("./complete.html", "_self"); // open a new window
  } else {
    render(questionIndex);
}
  

В моем complete.html , у меня есть следующие коды.

 <div class="quizComplete">
  <h2>All done!</h2>
  <p>
    Your score is: 
      <span id="quizTotalScore">
      <!-- USER SCORE APPEARS HERE -->
      </span>
  </p>
</div>
  

Тем не менее, я попытался использовать document.querySelector("#quizTotalScore").textContent = score; , но оценка не отображается в SPAN #quizTotalScore. Я что-то пропустил? Нужно ли мне сначала сохранить оценку в localStorage, чтобы она появилась на complete.html ?

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

1. Это отдельное окно, так что да, эта строка должна создать Unknown Reference Error: score ; используйте localStorage, как вы сказали

Ответ №1:

Используйте localStorage / cookies

Перед переходом на следующую страницу задайте переменную в вашем локальном хранилище

  localStorage.setItem("score","value");
 window.open("complete.html", "_self");
  

На вашей второй странице, в событии загрузки окна.

   $(function() {
     if(localStorage.getItem("variable")) {

      // set the ID here
       // after setting remember to remove it, if it's not required
       localStorage.removeItem("variable");
    }

   });
  

Ответ №2:

Вы открываете новую HTML-страницу. «оценка» — это переменная на предыдущей HTML-странице. Чтобы получить доступ к переменной, вам нужно сделать :

 document.querySelector("#quizTotalScore").textContent = window.opener.score;
  

window.opener -> указывает на HTML-страницу, которая открыла новую HTML-страницу с помощью window.open()

итак, здесь ваш window.opener укажет переменные и функции в quiz.html