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.

我已经评论了有问题/无法正常运行的代码，并插入了新代码，其中包含有关旧代码无法正常工作的注释。
希望它有所帮助！

＆＃13;

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);
        //}
    }

＆＃13;

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

＆＃13;

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

2 个答案: