JavaScriptで画像のスライドを動かしたり、止めたりしたいのですが
うまくいきません。
問題としましては、ボタンを押しても関数が作動しません。
JavaScriptのonclickイベントで動かす予定です。
HTMLのボタンにonclickを付けたらいけたんですが、
なぜJavaScriptからだとうまくいかないのか、、、モヤモヤします。
スライドの仕方は、配列に画像を入れスタートボタンを押したら
順番に回そうとしました。
それを
HTML
1<body> 2 <div id="displayArea"></div> 3 <button class="strbtn">スタート</button> 4 <button class="stpbtn">ストップ</button> 5 <script src="slide.js"></script> 6</body> 7</html>
JavaScript(slide.js)
1'use strict'; 2var display = document.getElementById("displayArea"); 3 4var image = new Array(); 5 6image[0] = "<div><img src='image1.jpg'></div>"; 7image[1] = "<div><img src='image2.jpg'></div>"; 8image[2] = "<div><img src='image3.jpg'></div>"; 9 10var cnt = 0; //カウント 11 12function slide(){ 13 display.innerHTML = image[cnt]; 14 15 if(cnt==2){ 16 cnt=0; 17 }else{ 18 cnt++; 19 } 20} 21var i; //clearTimeoutでつかうため 22 23function start(){ 24 slide(); 25 i = setTimeout(function() { 26 slide(); 27},100); 28} 29 30function stop() { 31 clearTimeout(i); 32} 33 34var strbtn = docement.getElementsByClassName('strbtn'); 35strbtn.onclick = start() 36var stpbtn = document.getElementsByClassName('stpbtn'); 37stobtn.onclick = stop(); 38
以上がコードになります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。