2016-11-02 13 views
0

私は完璧に動作するこの素晴らしいjavascriptカウンタを持っています。唯一の問題は、ボタンが最初にクリックされるまで実際の情報が表示されないことです。しかし、ボタンをクリックすると、カウンタ&他のテキストが常に表示され、更新されます。javascriptカウンタを表示するにはどうすればよいですか?

誰でも私がここで欠けているものを助けてください。前もって感謝します!

Javascriptを:

<script> 
function clickCounter() { 
    if(typeof(Storage) !== "undefined") { 
     if (localStorage.clickcount) { 
      localStorage.clickcount = Number(localStorage.clickcount)+1; 
     } else { 
      localStorage.clickcount = 1; 
     } 
     document.getElementById("result").innerHTML = "" + localStorage.clickcount + " <br>Subscribers So Far! And...<br>" + (1500 - +localStorage.clickcount) + "<br>Subscribers To Go" ; 
    } else { 
     document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
    } 
} 
</script> 

HTML:それは負荷で実行されるように

<p><button onclick="clickCounter()" id="paypal-btn1" type="button">Click me!</button></p> 
<p><button onclick="clickCounter()" id="paypal-btn2" type="button">Click me!</button></p> 
<p><button onclick="clickCounter()" id="paypal-btn3" type="button">Click me!</button></p> 
<div id="result"></div> 

答えて

0

は、あなたの関数の下clickCounterを()を追加します。

+0

を参照してくださいあなたは、コード例を持っていますか? –

+0

ここに行く:https://jsfiddle.net/k95rLfa3/ – spa900

+0

@ T.Doe - 答えは実際に何をすべきかを正確に伝えるので、サンプルコードは実際には必要ありません。 ( '

1

これをチェックしてください。情報を表示する別の関数を作成し、ページが読み込まれたときに呼び出します。その後、ボタンをクリックしたときにカウンタがインクリメントされると、この関数を再度呼び出します。

<script> 
    displayInformation(); 
    function displayInformation() { 
      document.getElementById("result").innerHTML = "" + localStorage.clickcount + " <br>Subscribers So Far! And...<br>" + (1500 - +localStorage.clickcount) + "<br>Subscribers To Go" ; 
    } 
    function clickCounter() { 
     if(typeof(Storage) !== "undefined") { 
      if (localStorage.clickcount) { 
       localStorage.clickcount = Number(localStorage.clickcount)+1; 
      } else { 
       localStorage.clickcount = 1; 
      } 
     displayInformation();/*Call this to refresh the click information*/ 
     } else { 
      document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
     } 
    } 
</script> 

ここjsfiddle

関連する問題