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

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

看看下面的代码：
1.你无法做到clearInterval。放错地方了。
2.You were not re-setting counter variable.

我已经评论了有问题/不工作的一段代码，并用 cmets 插入了新代码，说明你的旧代码为什么不能工作。
希望对您有所帮助！

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>

Answer 2

您的问题是您在单击start 按钮时没有将counter 变量重置为0。您还需要检查 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>