如何每次點擊按鈕時調用函數？

Question

我是javaScript的新手。每次我調用按鈕時，我都想調用啓動函數。但它只是第一次工作，之後，我每次點擊按鈕它什麼都不做。請幫幫我。 以下是我的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

你的問題是，你不counter變量重置爲0上start按鈕點擊時。你還需要檢查clearInterval裏面的nextWord函數。

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。它被放錯了地方。
2. You were not re-setting counter variable.

我評論過了一段代碼，這是有問題的/不工作，插入註釋新的代碼，爲什麼你的舊代碼不能正常工作。
希望它有幫助！

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>