画像を５回点滅させる

通常の「質問する」ボタンでも同じ質問をしましたが、「GsACADEMY」でも質問させていただきます。重複していたら申し訳ございません。

ボタンをクリックしたら画像を５回点滅させたいのですが、うまくいきません。
画像が消えるだけで点滅にもなっていません。

下記がコードです。

window.onload = function(){
var timer1;

btn.onclick = function(){
    for(i=0;i<=4;i++){
        tmstr();
    }
}

}

timer1 = setInterval("a()",100);

}

何がいけないのでしょうか？
まだ、初心者なので初歩的なことかもしれませんがよろしくお願いします。

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

回答1件

ベストアンサー

こんにちは。

挙げられているコードには、以下のような課題があると思いました。

(1) window.onload の中の変数btnがどこで定義されているか不明

(2) for(i=0;i<=4;i++){のループによって、tmstr()を5回呼んでいるが、
setInterval() は１回呼べばOK

(3) よって、希望の回数の点滅が完了したという判定を、別に追加する必要がある。

(4) 希望の回数だけ点滅させたら点滅を終了させるための変数timer1が、window.onload の
ローカル変数となっており、tmstr()の中の timer1 は同じものを指していない。

(5) 5回点滅させたいのなら、a()のvisibilityの入れ替えは、10回行われる必要がある。

これらを解決したものを以下に挙げます。(画像はW3Cのロゴです。)

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>9469</title>
6<script type="text/javascript">
7
8var timer1;  // インターバルタイマーのID
9
10var counter = 5 * 2; //点滅させたい回数×２
11
12window.onload = function(){ 
13  var btn = document.getElementById("click_me_btn");
14  btn.onclick = function(){ 
15    tmstr(); 
16  }  
17} 
18
19function a(){ 
20  counter --; //カウンターを１減少して０になったら、タイマーをクリア
21  if (counter == 0) { 
22    clearInterval(timer1); 
23    return;
24  }
25  var flga = document.getElementById("a_img").style.visibility; 
26  if(flga == "visible") 
27  { 
28    document.getElementById("a_img").style.visibility = "hidden"; 
29  } else{ 
30    document.getElementById("a_img").style.visibility = "visible";
31  }
32} 
33
34function tmstr(){ 
35  timer1 = setInterval("a()", 100); 
36} 
37</script>
38</head>
39<body>
40<img id="a_img"  src="https://www.w3.org/Icons/WWW/w3c_home_nb" /><br />
41<input type="button" id="click_me_btn"  value="click me !" />
42</body>
43</html>