2016-07-02 11 views
-1

タイトルにはスピードテストの読書カウンターを作成しようとしているため、何らかの理由で常に「不味い」を与え、理由を理解できません。それはページのロードにintialisedますので、コンソールは、エラーのanykind秒ごとにカウントワードを読み取るスピードテスト

HTML

<button class="btn" id="start" onclick="start();">Start Reading</button> 
<div id="page1" style="display: block;">text goes here</div> 
<button class="btn" id="stop" onclick="stop();">Finished!</button> 
<span id="wordValue"></span> 
<span id="timeValue"></span> 

JAVASCRIPT

jQuery('#stop').click(function(){ 
jQuery('#timeValue').append(getSeconds()); 
jQuery('#wordValue').append(Math.round(wordCount('#page1'))); 
jQuery('#wordValue').append(wpm); 
jQuery('#wordValue').append(difference); 
}); 

Stopwatch(); 

function Stopwatch(){ 
    var startTime, endTime, instance = this; 

    this.start = function(){ 
    startTime = new Date(); 
    }; 

    this.stop = function(){ 
    endTime = new Date(); 
    } 

    this.clear = function(){ 
    startTime = null; 
    endTime = null; 
    } 

    this.getSeconds = function(){ 
    if (!endTime){ 
    return 0; 
    } 
    return Math.round((endTime.getTime() - startTime.getTime())/1000); 
    } 

    this.getMinutes = function(){ 
    return instance.getSeconds()/60; 
    }  
    this.getHours = function(){ 
    return instance.getSeconds()/60/60; 
    }  
    this.getDays = function(){ 
    return instance.getHours()/24; 
    } 

    this.wordCount = function wordCount(text){ 
    testWords = (jQuery(text).text().length)/5; 
    return testWords; 
    } 

    wpm = Math.round(wordCount('#page1')/(getSeconds()/60)); 
    difference = Math.round(100*((wpm/250)-1)); 

    } 
} 

答えて

1

コードが動作しない主な理由:WPM違いはあなたがStopwatchを呼び出したときに計算されますが、クロックが停止しているときにのみ、これらを計算する必要があります。 Stopwatchを呼び出すと、getSeconds()が検出され、endTimeはまだ定義されておらず、0を返します。その結果を分母に使用すると、0で除算され、JavaScriptでInfinityが得られます。

しかし、他のいくつかの問題があるとして、あなただけ、それを修正するべきではありません。

  1. あなたは、その関数がコンストラクタであるかのようにStopwatchthisキーワードを使用しますが、あなたは、コンストラクタとしてそれを使用することはありません。これを行うには、newキーワードで関数を呼び出し、そのメソッドにアクセスする必要がある変数に作成したオブジェクトを割り当てる必要があります(startstop、...)。今のように、thiswindowと同義語になります。strict modeを使用すると、JavaScriptがそれに不満を持ちます。

    したがって、接頭辞thisを削除するか、Stopwatchを真のコンストラクタにすることができます。最初のオプションは、関数内からグローバルスコープ内の変数を変更し続けるので、本当にうまくいきません。これは悪い設計と見なされます。そこで、私はStopwatchをコンストラクタとして使用してコードを提示します。

  2. ボタンのクリックハンドラーは、HTMLとJavaScriptコードの両方で表示されます。それは最初に実行されるものについて疑問を残すので、それは悪いデザインです。私はあなたのJavaScriptコードをHTMLではなく、JavaScriptだけで要素にバインドすることを提案します。

  3. jQueryのappendを使用して純粋なテキストを追加します。まず、常に結果を追加することによって、読みやすさはかなり悪くなり、連続した結果が互いに固執します。第二に、appendはHTMLを追加するのに適しています。テキストの場合は、textメソッドを使用する必要があります。また、テキストのさまざまな部分を別々のHTMLコンテナに入れるのがよいでしょう。

ここに修正コードがあります。コメントは、変更内容を明確にする必要があります

// Use stopwatch as a constructor with `this` being the created object: 
 
var watch = new Stopwatch(); 
 

 
// Bind the event handlers to both the buttons. No more HTML `onclick` attributes. 
 
jQuery('#start').click(watch.start); 
 
jQuery('#stop').click(function(){ 
 
    if (watch.getSeconds() === null) { 
 
    alert('you did not start yet!'); 
 
    return; 
 
    } 
 
    //Stop the clock 
 
    watch.stop(); 
 
    // create wpm and difference here: 
 
    var wpm = Math.round(wordCount('#page1')/(watch.getSeconds()/60)); 
 
    var difference = Math.round(100*((wpm/250)-1)); 
 
    // refer to watch's methods, and use text() 
 
    jQuery('#timeValue').text(watch.getSeconds()); 
 
    // Make sure to replace the previous result, and give some clarity in the output 
 
    jQuery('#wordValue').text(Math.round(wordCount('#page1'))); 
 
    jQuery('#speed').text(wpm); 
 
    jQuery('#difference').text(difference + '%'); 
 
}); 
 

 
function Stopwatch(){ 
 
    var startTime, endTime, instance = this; 
 

 
    this.start = function(){ 
 
    startTime = new Date(); 
 
    }; 
 

 
    this.stop = function(){ 
 
    endTime = new Date(); 
 
    } 
 

 
    this.clear = function(){ 
 
    startTime = null; 
 
    endTime = null; 
 
    } 
 

 
    this.getSeconds = function(){ 
 
    // return non-numerical value to indicate timer was not started 
 
    if (!startTime){ 
 
     return null; 
 
    } 
 
    if (!endTime){ 
 
     return 0; 
 
    } 
 
    return Math.round((endTime.getTime() - startTime.getTime())/1000); 
 
    } 
 

 
    this.getMinutes = function(){ 
 
    return instance.getSeconds()/60; 
 
    }  
 
    this.getHours = function(){ 
 
    return instance.getSeconds()/60/60; 
 
    }  
 
    this.getDays = function(){ 
 
    return instance.getHours()/24; 
 
    } 
 
} 
 

 
// create separate function that has little to do with the stopwatch: 
 
function wordCount(text){ 
 
    testWords = (jQuery(text).text().length)/5; 
 
    return testWords; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn" id="start" >Start Reading</button> 
 
<div id="page1" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
<button class="btn" id="stop" >Finished!</button><br> 
 
Words: <span id="wordValue"></span><br> 
 
Speed: <span id="speed"></span><br> 
 
Difference: <span id="difference"></span><br> 
 
Seconds: <span id="timeValue"></span><br>

1

それは無限のWPMを与えるを与えるものではありません。だから、単語の数は正しいですが、getSeconds()は常に0を返します。私はそれを停止ボタンとともに置いています。それは大丈夫です。どうぞご覧ください。

 <button class="btn" id="start" onclick="start();">Start Reading</button> 
    <div id="page1" style="display: block;">text goes here 
    What is Lorem Ipsum? 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

    Why do we use it? 
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 


    Where does it come from? 
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. 

    Where can I get some? 
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 



    </div> 
    <button class="btn" id="stop" onclick="stop();">Finished!</button><br/> 

    <span id="wordValue"></span> words <br/> 
    <span id="timeValue"></span> time <br/> 
    <span id="wpm"></span> WPM Speed <br/> 
    <span id="diff"></span> difference 


     <script> 
$(document).ready(function() { 
      jQuery('#stop').click(function(){ 

       jQuery('#timeValue').append(getSeconds()); 
       jQuery('#wordValue').append(Math.round(wordCount('#page1'))); 
       jQuery('#wpm').append(wpm); 
       jQuery('#diff').append(difference); 
      }); 


    Stopwatch(); 
    function Stopwatch(){ 
     var startTime, endTime, instance = this; 

     this.start = function(){ 
     startTime = new Date(); 
     alert(startTime); 
     }; 

     this.stop = function(){ 
     endTime = new Date(); 

     wpm = Math.round(wordCount('#page1')/(getSeconds()/60)); 
     alert(Math.round(wordCount('#page1'))); 
     alert(getSeconds()/60); 
     difference = Math.round(100*((wpm/250)-1)); 
     }; 

     this.clear = function(){ 
     startTime = null; 
     endTime = null; 
     }; 

     this.getSeconds = function(){ 
     if (!endTime){ 
     return 0; 
     } 
     return Math.round((endTime.getTime() - startTime.getTime())/1000); 
     }; 

     this.getMinutes = function(){ 
     return instance.getSeconds()/60; 
     } ;  
     this.getHours = function(){ 
     return instance.getSeconds()/60/60; 
     } ; 
     this.getDays = function(){ 
     return instance.getHours()/24; 
     } ; 

     this.wordCount = function wordCount(text){ 
     testWords = (jQuery(text).text().length)/5; 
     return testWords; 
     }; 



     } 
    }); 
     </script> 
関連する問題