谁能指出我在这里的错误我找不到它

Question

So this is my last task for FreeCodeCamp, i've asked on the chat room but nobody could point me the error. The problem is that the pattern the computer plays starts with the last element, then goes from start to finish, repeating the last element, which is confusing for the player.

$(document).ready( function() {

  var gamestarted = false;
  var arrTones = []; // track all game tones from the begining
  var arrPlayer = []; // track all user tones played
  var arrComp = []; // track all comp tones played
  var steps = null;
  var playerTurns = null;
  var strict = null;

  function playAudio(id) {
    var audio = 'audio' + id ;
    audio = document.getElementById(audio);
    audio.play();
  }

  $('.audio').click(function () {
    var id = Number( $(this).attr('id') );
    playAudio(id);
    if(gamestarted) {
      arrPlayer.push(id);
      if ( arrPlayer[playerTurns] != arrComp[playerTurns] ) {
        if(strict) {
          alert('Start a new game');
          setTimeout( start, 1000 );
        } else {
          alert('Here is the pattern again');
          setTimeout( nextstep, 1000 );
        }
      } else if ( arrPlayer.length < arrComp.length ) {
        playerTurns++;
      } else if ( arrPlayer.length == arrComp.length && steps < 20) {
        steps++;
        setTimeout( nextstep , 1000);

      }

    }
  });

  function start() {

//     reset of all arrays and the steps
    arrTones = [];
    arrPlayer = [];
    arrComp = [];
    steps = 0;
    gamestarted = true;
    strict = $('#strict').prop('checked');

//     generate all moves for this game
    for (var i=1; i<=20; i++) {
      val = Math.floor(Math.random() * (4 - 1 + 1) + 1);
      arrTones.push(val);
    }

//     get first comp move
    nextstep();

  }

  $('#start').click(function () {
    start();        
  });  

  function nextstep() {

    var tones = 0;

    arrComp = [];
    for (var x=0; x<=steps; x++) {
      arrComp.push(arrTones[x]);
    }

    var moves = setInterval(function() {

      compTurn(arrComp[tones]);

      tones++;

      if ( tones >= arrComp.legth ) {
        clearInterval(moves);
      }

    }, 1000);

    playerTurn();
  }

  function compTurn(id) {
    var button = '#'+id;
    $(button).addClass('btn-outline-secondary');
    playAudio(id);
    setTimeout( function () {
      $(button).removeClass('btn-outline-secondary');
    }, 300);
  }

  function playerTurn() {
    arrPlayer = [];
    playerTurns=0;
  }

});

Here is the codepen code for this Simon Game

Answer 1

You have misspelled property name 'length'

if ( tones >= arrComp.legth ) {
    clearInterval(moves);
  }

change it to arrComp.length it will work.