Javascript:textContentでの書き換えができません

Javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>サンプル</title>
6  </head>
7  <body>   
8      <h1 id="kakikae">0回目</h1> 
9  　  <input id="start" type="button" value="start">
10    <script>
11        window.onload = function(){
12        document.getElementById("start").addEventListener("click",function()
13        { 
14            var times =0;
15            var timeselement =document.getElementById("kakikae") ;           
16            for(var times=0;times<10;times++){
17                             alert();
18                             timeselement.textContent = times +1+ "回目";}
19         }                                                                  )
20                                   }
21    </script>   
22  </body>
23</html>

前提・実現したいこと

ブラウザ画面でstartボタンを押す。→ダイアログボックスでOKボタンを押すたびにブラウザ画面に「ｎ回目」の表示がされる（ｎは１から１０,OKボタンを押した回数）

発生している問題・エラーメッセージ

１から９回目までは表示が変わらず、最後の10回目をクリックして初めて「10回目」と表示が変わります。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>サンプル</title>
6  </head>
7  <body>   
8      <h1 id="kakikae">0回目</h1> 
9  　  <input id="start" type="button" value="start">
10    <script>
11        window.onload = function(){
12        document.getElementById("start").addEventListener("click",function()
13        { 
14            var times =0;
15            var timeselement =document.getElementById("kakikae") ;           
16            for(var times=0;times<10;times++){
17                             alert();
18                             timeselement.textContent = times +1+ "回目";}
19         }                                                                  )
20                                   }
21    </script>   
22  </body>
23</html>

試したこと

下記のようにfor文を外してみましたが同様の動作です（最後だけ数字が変わる）。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>サンプル</title>
6  </head>
7  <body>   
8      <h1 id="kakikae">0回目</h1> 
9    <input id="start" type="button" value="start">
10    <script>
11        window.onload = function(){
12        document.getElementById("start").addEventListener("click",function(){ 
13            var times =0;
14            var timeselement =document.getElementById("kakikae") ;           
15            alert();
16            timeselement.textContent = times +1+ "回目";
17            times =times +1;
18            alert();
19            timeselement.textContent = times +1+ "回目";
20            times =times +1;
21            alert();
22            timeselement.textContent = times +1+ "回目";
23            times =times +1;
24            alert();
25            timeselement.textContent = times +1+ "回目";
26            times =times +1;
27            alert();
28            timeselement.textContent = times +1+ "回目";
29          
30         })
31        }
32    </script>   
33  </body>
34</html>
35

補足情報（FW/ツールのバージョンなど）

Brackets1.13
Google Chrome

m.ts10806

2018/08/09 05:31

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/08/09 05:32

何も文言を表示させていないalert();は何のために置いているのでしょうか？

行動規範の内容に同意します

回答2件

提示のコードでは押したらそのときに10回ループしてtextContent で指定の箇所を上書きし続けているだけです。
「押すたびにカウントアップ」なのであれば、押したときに表示されている数値を取得してその数値に対して＋１するか、
現在のカウント値をグローバル変数で持っておいて押したらその変数に＋１をした上でtextContent で上書き

するように処理を書いてください。（parseInt()は忘れずに）

投稿2018/08/09 05:35

編集2018/08/09 05:36

m.ts10806

総合スコア80850

gorosuke

2018/08/09 05:48

ご回答ありがとうございます。また、初心者へのもろもろのご指導についても感謝いたします。

m.ts10806

2018/08/09 05:52

質問は編集できるので適宜対応してください。読みやすく分かりやすい質問は早期解決につながります。特にコードは再現確認を行って回答に反映する回答者も多いです。コードブロック対応されていないとワンクリックでコピーできませんし、行頭の空白がなくなっていたりして実際のコードそのままにはなりませんので、正しく再現確認が行えませんので。

gorosuke

2018/08/09 06:22

<code>押して訂正してみました。それでも見てくれが良くないような気がしますが… 今後ともご指導の程よろしくお願いいたします。尚、alert()をいれたのはクリックごとに数字が変更されるようにしようとしたためでした。

m.ts10806

2018/08/09 06:56

そこは「インデント」が最適化されていないからだと思います。 Web上に各種言語の整形サービスは結構ありますし、フォーマット機能のついたエディタを利用するのもありです。 Bracketsは私も使ってますが、拡張機能でコードフォーマット機能を追加できますので入れてみてください。

行動規範の内容に同意します