输入单词会导致数据点出现 NaN 错误

Question

当我输入一个单词时，这会向我显示警报中 NaN 的错误。成功消息显示正确的值，但警报显示 NaN 错误。 points 和 totalPoints 在函数作用域之外声明

   var wordList = ["jalapeno", "nopal", "jalap", "paeon", "panel", "pelon", "penal", "plena", "pleon", "plane"]
var wordInput = $('#word-input');
var totalPoints = 0; // initialize total points variable
var points = 0;

var notEmpty = function(message) {
  $('.sb-message-box').addClass('error-message').text(message);
  // $('.sb-hive-input-content').addClass('not-empty').text(message); 
  setTimeout(function() {
    $('#word-input').val('');
    // $('.sb-hive-input-content').removeClass('not-empty').text('');
    $('.sb-message-box').removeClass('error-message').text('');
  }, 1000);
}

var hasError = function(message) {
  $('.sb-message-box').addClass('error-message').text(message);
  $('.sb-hive-input-content').addClass('has-error').text(message);
  setTimeout(function() {
    $('#word-input').val('');
    $('.sb-hive-input-content').removeClass('has-error').text('');
    $('.sb-message-box').removeClass('error-message').text('');
  }, 1000);
}

var successMessage = function(message) {
  $('.sb-message-box').addClass('success-message').text(message);
  $('.sb-message-box').addClass('sb-message').text(message);
  $('.sb-hive-input-content').addClass('isAccepting').text();
  setTimeout(function() {
    $('#word-input').val('');
    $('.sb-message-box').removeClass('success-message').text('');
    $('.sb-message-box').removeClass('sb-message').text('');
    $('.sb-hive-input-content').removeClass('isAccepting').text();
  }, 1000);
}

// Define click function for enter-btn
$('#enter-btn').click(function() {

  var word = wordInput.text().trim();
  var centerLetter = $('.hive-cell.center .cell-letter').text();

  console.log(word)


  // Statements & conditions
  if (word.trim().length === 0) {
    notEmpty('Enter a word');

  } else if (word.length <= 3) {
    $('.sb-hive-input-placeholder').text(word);
    hasError('Too short');

  } else if (word.indexOf(centerLetter) === -1) {
    $('.sb-hive-input-placeholder').text(word);
    hasError('Missing center letter');

  } else if (word.length > 3 && !wordList.includes(word.toLowerCase())) {
    $('.sb-hive-input-placeholder').text(word);
    // hiveInput.removeClass('sb-hive-input-placeholder');
    hasError('Not in word list');

  } else if (wordList.includes(word.toLowerCase()) && !result.includes(word.toLowerCase())) {

    // Get letter count of the word

    var letterCount = word.length;
    if (letterCount === 4) {
      points = 1;
      successMessage('Good! ' + points + 'point.');
    } else if (letterCount === 5) {
      points = 5;
      successMessage('Good! ' + letterCount + ' points.');
    } else if (letterCount === 6) {
      points = 6;
      successMessage('Good! ' + letterCount + ' points.');
    } else if (letterCount === 7) {
      points = 7;
      successMessage('Good! ' + letterCount + ' points.');
    } else if (letterCount === 8) {
      // Checks if the word is a pangram
      points = 15;
      successMessage('Got a pangram! 15 points!');
    } else {
      successMessage('Good! ' + letterCount + ' letters. Keep going!');
    }
    alert(points);
    console.log(points);
    totalPoints = totalPoints + points;
  }
});

    // Create and Set Cookie
    function setCookie(cookieName, cookieValue, daysToExpire, path) {
        var date = new Date();
    
        date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
        document.cookie = cookieName + "=" + JSON.stringify(cookieValue) + "; expires=" + date.toGMTString() + ";   path=" + path ;
        console.log("setCookieValue: " + JSON.stringify(cookieValue));
    }
    
    setCookie('Result', result, 1, '/');

Answer 1

您永远不会将您的积分值保存到totalPoints 值中，因此totalPoints 无法叠加。最重要的是，您需要将存储变量放置在函数范围之外。在您的情况下，您只需在每次调用函数时将totalPoints 设置为0。

所以解决方案是：

        var totalPoints = 0; // initialize total points variable
        let wordList = ["test", "test2", "test3", "test4", "testtest"] // Changed
        let result = [] // Changed
        
        // Define click function for enter-btn
        $('#enter-btn').click(function() {   
          let points = 0; // Changed
          let wordInput = document.getElementById("inputTxt") // Changed
          var word = wordInput.value.trim(); // Changed
          var centerLetter = $('.hive-cell.center .cell-letter').text();

          // functions
          var notEmpty = function(message) { 
              $('.sb-message-box').addClass('error-message').text(message); 
                  // $('.sb-hive-input-content').addClass('not-empty').text(message); 
              setTimeout(function() {
                  $('#word-input').val('');
                  // $('.sb-hive-input-content').removeClass('not-empty').text('');
                      $('.sb-message-box').removeClass('error-message').text('');
              }, 1000); 
          } 

          var hasError = function(message) { 
              $('.sb-message-box').addClass('error-message').text(message);
                  $('.sb-hive-input-content').addClass('has-error').text(message); 
              setTimeout(function() {
                  $('#word-input').val('');
                      $('.sb-hive-input-content').removeClass('has-error').text('');
                          $('.sb-message-box').removeClass('error-message').text('');
              }, 1000); 
          } 

          var successMessage = function(message) { 
                  $('.sb-message-box').addClass('success-message').text(message); 
                  $('.sb-message-box').addClass('sb-message').text(message); 
                      $('.sb-hive-input-content').addClass('isAccepting').text(); 
              setTimeout(function() {
                  $('#word-input').val('');
                      $('.sb-message-box').removeClass('success-message').text('');
                      $('.sb-message-box').removeClass('sb-message').text('');
                          $('.sb-hive-input-content').removeClass('isAccepting').text(); 
                  }, 1000); 
          }

          // Statements & conditions
          if (word.trim().length === 0) { 
              notEmpty('Enter a word');

          } else if (word.length <= 3) { 
              $('.sb-hive-input-placeholder').text(word); 
              hasError('Too short'); 

          } else if (word.indexOf(centerLetter) === -1) { 
              $('.sb-hive-input-placeholder').text(word); 
              hasError('Missing center letter'); 

          } else if (word.length > 3 && !wordList.includes(word.toLowerCase())) { 
              $('.sb-hive-input-placeholder').text(word);
              // hiveInput.removeClass('sb-hive-input-placeholder');
              hasError('Not in word list');

          } else if (wordList.includes(word.toLowerCase()) && !result.includes(word.toLowerCase())) {

          // Get letter count of the word

          var letterCount = word.length;
          if (letterCount === 4) {
              points = 1;
              successMessage('Good! ' + points + 'point.');
          } else if (letterCount === 5) {
              points = 5;
              successMessage('Good! ' + letterCount + ' points.');
          } else if (letterCount === 6) {
              points = 6;
              successMessage('Good! ' + letterCount + ' points.');
          } else if (letterCount === 7) {
              points = 7;
              successMessage('Good! ' + letterCount + ' points.');
          } else if (letterCount === 8) {
              // Checks if the word is a pangram
              points = 15;
              successMessage('Got a pangram! 15 points!');
          } else {
              successMessage('Good! ' + letterCount + ' letters. Keep going!');
          }
          //alert(points);
          console.log("new points: " + points);
          totalPoints += points;
          console.log("totalPoints: " + totalPoints);
          result.push(word.toLowerCase())
          }
        })

sssccc

Add