Entering words results in NaN errors for data points

Question

When I type a word, this shows me an error with NaN in the alert. The success message shows the correct value, but the alert shows a NaN error. points and totalPoints are declared outside function scope

   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

You never save your points value into the totalPoints value, so totalPoints cannot stack. Most importantly, you need to place the storage variable outside the scope of the function. In your case, you just set totalPoints to 0 every time you call the function.

So the solution is:

        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 && !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