Javascriptを使用してテキストファイルからランダムキャプションを読み込み、HTMLで表示する

Question

ページが読み込まれるたびにランダムなキャプションを読み込もうとしています。私は別のテキストファイルを持っていて、各行には文字列が入っています。私はあなたが見るように、HTMLとJavaScriptの両方に新しいです。

HTML：

<div class="centerpiece"> 
       <h1>DEL NORTE BANQUEST</h1> 
       <p class="caption"><script src = "js/caption.js"></script><script>getCaption();</script></p> 
       <a class="btn" id="browse-videos-button" href="#video-list">Browse Videos<br><img src="img/arrow-down.svg"style="width:15px;height:15px;"></a> 
      </div> 

Javascriptを：

function getCaption() 
{ 
    var txtFile = "text/captions.txt" 
    var file = new File(txtFile); 
    file.open("r"); // open file with read access 
    var str = ""; 
    var numLines = 0; //to get the range of lines in the file 
    while (!file.eof) 
    { 
     // read each line of text 
     numLines += 1; 
    } 
    file.close(); 
    file.open("r"); 
    var selectLine = Math.getRandomInt(0,numLines);//get the correct line number 
    var currentLine = 0; 
    while(selectLine != currentLine) 
    { 
    currentLine += 1; 
    } 
    if(selectLine = currentLine) 
    { 
    str = file.readln(); 
    } 
    file.close(); 
    return str; 
} 

ソースファイル内のテキスト：テキストファイルを混乱された場合には

We talked yesterday 
Freshman boys! 
5/10 
I'm having a heart attack *pounds chest super hard 

サイトは、私の高校クロスカントリーチームのためにあります。

私はほとんどの構文に慣れていないので、何らかの理由でリセットする必要がある場合、ループを使ってファイルを反復処理してファイルを2回開いて閉じたかどうかを確認できませんでした。ここでは、私が変更しようとしている特定のキャプションのjsfiddleと、私の関数がJavascriptであるものを示します。

https://jsfiddle.net/7cre9qqj/

あなたは私に知らせてください、あなたが持つかもしれない批判は、それが混乱のように見える場合、私はすべての後に学ぶことを試みている我慢いけないしてくださいと連携してより多くのコードが必要な場合は！ご協力ありがとうございました！

Answer 1

File APIは、クライアント側のファイルシステムにアクセスできるため、あなたがしたいことにはあまり適していません。非常に特殊な状況でのみ使用することも許可されています。

単純な解決策は、AJAXリクエストを実行して見積もりを入力することです。 AJAX呼び出しはサーバー上のファイルを読み取ることができます。ファイルの内容を1行ずつ分割し、ランダムな行を表示して表示するのは簡単です。 jQueryを公開しているので、コードはかなりシンプルです。

$.get("text/captions.txt")).then(function(data) { 
    var lines = data.split('\n'); 
    var index = Math.floor(Math.random() * lines.length); 
    $("#quote").html(lines[index]); 
}); 

ここでは完全に説明しているフィドルです。実行するたびにランダムな見積もりがロードされます：https://jsfiddle.net/s1w8x4ff/