如何每次点击按钮时调用函数？

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>