ボタンをクリックするたびに関数を呼び出す方法は？

Question

私はjavaScriptを初めて使用しています。私はボタンを呼び出すたびにstart関数を呼び出す必要があります。しかし、それは初めてのことです。その後、ボタンをクリックするたびに何もしません。私を助けてください。 以下は私のhtmlとjsです。

<div class="container"> 
    <h1>Are you ready?</h1> 
    <button id="start">start</button> 
    <h1 id="canvas"></h1> 
</div> 

とJS

var counter = 0; 
var i = 0; 
var words = ['jzg', 'oqs', 'lmb', 'ert', 'pkf', 'lhx', 'dyw']; 
var canvas = document.getElementById('canvas'); 
var btn = document.getElementById('start').addEventListener('click',start); 

function start() { 
function nextWord() { 
    if (counter < words.length) { 
     canvas.innerHTML = words[counter]; 
    } else { 
     return false; 
    } 
    counter++; 
} 

var show = setInterval(nextWord, 1000); 
if (counter > words.length) { 
    clearInterval(show); 
} 

}

Answer 1

あなたの問題は、あなたがstartボタンをクリックすると0にcounter変数をリセットしていけないということでした。またnextWordの機能の中でclearIntervalをチェックする必要があります。

var counter = 0; 
 
var i = 0; 
 
var words = ['jzg', 'oqs', 'lmb', 'ert', 'pkf', 'lhx', 'dyw']; 
 
var canvas = document.getElementById('canvas'); 
 
var btn = document.getElementById('start').addEventListener('click',start); 
 

 
function start() { 
 

 
    counter = 0; 
 
    var show; 
 
    clearInterval(show) 
 

 
    function nextWord() { 
 
     
 
     console.log('here?'); 
 
     
 
     if (counter >= words.length) { 
 
    
 
      clearInterval(show); 
 
      canvas.innerHTML = ''; 
 
      
 
     } 
 
    
 
     if (counter < words.length) { 
 
     canvas.innerHTML = words[counter]; 
 
     } 
 
     counter++; 
 
     
 
      
 
    } 
 

 
    show = setInterval(nextWord, 1000); 
 
    
 
    
 
    
 

 
}

<div class="container"> 
 
    <h1>Are you ready?</h1> 
 
    <button id="start">start</button> 
 
    <h1 id="canvas"></h1> 
 
</div>

Answer 2

は、以下のコードを見てみましょう：
1.あなたはclearIntervalを行うことができませんでした。それは間違っていた。

私は、問題のあるコード/動作していないコードにコメントし、古いコードが動作していなかった理由について新しいコードを挿入しました。
希望すると助かります！

var counter = 0; 
 
    var i = 0; 
 
    var words = ['jzg', 'oqs', 'lmb', 'ert', 'pkf', 'lhx', 'dyw']; 
 
    var canvas = document.getElementById('canvas'); 
 
    var btn = document.getElementById('start').addEventListener('click',start); 
 

 
    function start() { 
 
     function nextWord() { 
 
      if (counter < words.length) { 
 
       canvas.innerHTML = words[counter]; 
 
       counter++; 
 
      } else { 
 
       //return false;//<---Once you reach counter == words.length, 
 
           //you are one past last index of `words` 
 
           //array 
 
           
 
       clearInterval(show);//This is the time you should clear 
 
            //interval, so that clicking on button 
 
            //could set a new interval 
 
       counter = 0;  //Set this to 0 since you want to begin 
 
            //again from the 0 index of words array 
 
      } 
 
      
 
     } 
 

 
     var show = setInterval(nextWord, 1000); 
 
     /*You were never reaching this code below since maximum value of counter was equal to `words.length`, which in this case was 7 and counter was never more than 7. That's why this part is moved to else part above */ 
 
     //if (counter > words.length) { 
 
     // clearInterval(show); 
 
     //} 
 
    }

<div class="container"> 
 
     <h1>Are you ready?</h1> 
 
     <button id="start">start</button> 
 
     <h1 id="canvas"></h1> 
 
    </div>