Javascript幫助 - 定時器（不計數）和警報框（不顯示）

我是JavaScript和HTML的新手，但我慢慢獲取HTML，但JavaScript正在努力工作。當我點擊開始測驗按鈕時，我遇到了讓我有計數器開始的問題。當我單擊「提交答案」按鈕時，我也遇到了出現警告框的問題。我不想找人給我答案，但一些指導將有所幫助。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; 
}

來源

2015-10-30 Ph1shPhryd

爲什麼'seconds'一個字符串？無論如何，只要將值設爲'0'即可。此外，這行'document.getElementByID（'quizclock'）value = seconds;'應該是'document.getElementById（'quizclock'）。value = seconds;'。請務必檢查您的控制檯是否有任何錯誤。另外，你能否在你的問題中提供你的'resetQuiz'函數？ – Dom

我已經添加了resetQuiz（）函數。 – Ph1shPhryd

你有兩個錯誤。

1.document.getElementByID('sth')應該是document.getElementById('sth')。
請注意Id末尾的小寫d。

2.你應該把一個.value這樣前：

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

這一切都是假設你已經實現startQuiz()，resetQuiz()和showQuiz()和它們能否正常使用。

來源

2015-10-30 18:11:04

幾個簡單的錯誤讓我的腦子好一個小時。感謝您的幫助，但我仍然無法讓Alert Box顯示。我現在正在使用Chrome進行測試。 – Ph1shPhryd

@ Ph1shPhryd我假設你指的是'showQuiz（）'你沒有共享JavaScript和HTML。無法幫助你。 –

希望有助於; 嘗試運行代碼段！

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(); } 
 
    }); 
 
});

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

<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>

來源

2015-10-30 19:49:37 Hitmands

Javascript幫助 - 定時器（不計數）和警報框（不顯示）

回答

相關問題