スライドを止めたり動かしたりするのができない

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件

ベストアンサー

まず、綴りミスですね。（「docement」と「stobtn」）
その上で、クラスで取得しているので複数となり、[0]をつけることで取得できます。
実行する処理は、function(){ ... }の中に書く必要があります。

javascript
1var strbtn = document.getElementsByClassName('strbtn');
2strbtn[0].onclick = function(){
3	start();
4}
5var stpbtn = document.getElementsByClassName('stpbtn');
6stpbtn[0].onclick = function(){
7	stop();
8}