Question

我是JavaScript和HTML的新手，但我正在慢慢地获取HTML但我正在努力学习JavaScript。当我点击开始测验按钮时，我遇到了让我有一个反启动的问题。当我点击提交答案按钮时，我也出现了警报框出现问题。我不是在找人给我答案，但一些指导会有所帮助。

<head>
    <meta charset="UTF-8" />
    <title>Trivia Quiz: Movies</title>
    <script src="modernizr-1.5.js" type="text/javascript" ></script>
    <link href="quiz.css" rel="stylesheet" type="text/css" />
    <script src="functions.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var seconds = "0";
        var clockID;
    </script>
    <script type="text/javascript">
        function runClock() {
            seconds++;
            document.getElementByID('quizclock')value=seconds;
        }
    </script>
    <script type="text/javascript">
        function startClock() {
            showQuiz();
            clockId=setInterval ("runClock()", 1000);
        }
    </script>
    <script type="text/javascript">
        function stopClock() {
            clearInterval (clockId);
            correctAns = gradeQuiz();
            window.alert("You have" + correctAns + "correct of 5 in" + timer + "seconds");
        }
    </script>
 </head>

<body onload="resetQuiz()">
    <form id="quiz" name="quiz" action="">
        <header>
            <img src="tlogo.png" alt="Online Trivia" />
            <nav class="horizontal">
                <ul>
                    <li><a href="#">Top Scores</a></li>
                    <li><a href="#">Submit a Quiz</a></li>
                    <li><a href="#">Quiz Bowl</a></li>
                    <li><a href="#">Your Account</a></li>
                </ul>
            </nav>
        </header>

        <nav class="vertical">
            <h1>Categories</h1>
            <ul>
                <li><a href="#">Arts</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="#">Culture</a></li>
                <li><a href="#">Geography</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Movies</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">People</a></li>
                <li><a href="#">Random</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Television</a></li>
            </ul>
        </nav>

        <section id="main">
            <h1>Movie Trivia</h1>

            <p>
                All of our trivia quizzes are scored on the number of correct
                answers and the time required to submit those answers.
            </p>
            <p>
                To start the quiz, click the <b>Start Quiz</b> button below, 
                which will reveal the first page of quiz questions and start 
                the timer. When you have completed the questions, click 
                the <b>Submit Answers</b> button on the quiz form.
            </p>

            <aside>
                <input name="quizclock" id="quizclock" value="0" />
                <input id="start" type="button" value="Start Quiz" onclick="startClock()"  />
                <input  id="stop" type="button" value="Submit Answers" onclick="stopClock()"/>
            </aside>
        </section>
    </form>
</body>

提供的代码是部分代码，我相信这是代码所需的唯一代码部分。谢谢。

按要求重置功能：

function resetQuiz() {
  document.quiz.quizclock.value = 0;
  for (i=0; i<document.quiz.elements.length; i++) document.quiz.elements[i].disabled=false;       
   document.quiz.stop.disabled = true;
}

Answer 1

你有两个错误。

1。 document.getElementByID('sth')应为document.getElementById('sth') 请注意d末尾的小写Id。

2。您应该在.之前添加value，如下所示：

document.getElementById('quizclock').value = seconds;

这是假设您已实施startQuiz()，resetQuiz()和showQuiz()并且它们正常运作。

Answer 2

希望帮助; 尝试运行代码段！

＆＃13;

var Quiz = (function($) {
  var updateView = function(timeElapsed) {
    $('#result').html(timeElapsed);
  };
  function Quiz() {
    updateView(this.timing);
  }
  
  Quiz.prototype.timing = 0;
  
  Quiz.prototype.start = function() {
    var self = this;
    if(self._isCounting) {
      return;
    }
    return this._interval = (function() {
      self._isCounting = true;
      var interval = window.setInterval(function() {
        self.timing += 1;

        updateView(self.timing);
        
      }, 1000);
      
      return interval;
    })();
  };
  
  
  Quiz.prototype.stop = function() {
    window.clearInterval(this._interval);
    this._isCounting = false;
    return this;
  };
  
  Quiz.factory = function() {
    return new Quiz();
  };
  return Quiz;
})(window.jQuery);

window.jQuery(document).ready(function($) {
  var historyQuiz = Quiz.factory();
  
  historyQuiz.start();
  var modalIsOpen = false;
  
  $('#stop').click(historyQuiz.stop.bind(historyQuiz));
  $('#resume').click(historyQuiz.start.bind(historyQuiz));
  $('#submitQuizData').click(function(event) {

    historyQuiz.stop();
    
    return $.Deferred().resolve(historyQuiz.timing)
      .then(function(val) { 
        return $('#quizResult').html(val + 's') 
      })
      .then(function(element) { return element.fadeIn(); })
      .then(function(element) { modalIsOpen = true; })
  });

  $('#quizResult').click(function() {
    if(modalIsOpen) { modalIsOpen = false; return $('#quizResult').fadeOut(); }
  });
});

＆＃13;

.quiz-result {
  display: none;
  text-align: center;
  width: 300px;
  height: 300px;
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="result"></div>

<button id="stop">STOP QUIZ</button>
<button id="resume">RESUME QUIZ</button>
<button id="submitQuizData">SUBMIT QUIZ DATA</button>

<div id="quizResult" class="quiz-result"></div>

＆＃13;

Javascript帮助 - 计时器（不计数）和警报框（不显示）

2 个答案: