Javascript case insensitive when comparing a letter in a word

Question

I'm have this exercise where a user enters a word then enters a letter to see how many times the letter appears in that word. This part of the project works just fine. However, I want to make it case insensitive, as of right now it's not. I thought creating a variable for uppercase and one for lowercase then comparing both of those variables to i or to the letter variable would work. However, it's making the counter double the amount of letters found in the word. Can someone help me? Here's my code:

function checkWordAndLetter() {
  var userWord = $("#word").val();
  console.log(userWord);
  var userLetter = $("#letter").val();
  console.log(userLetter);
  var letterUpperCase = userLetter.toUpperCase();
  var letterLowerCase = userLetter.toLowerCase();
  var tally = 0;
  for (i = 0; i < userWord.length; i++) {
    if (userLetter == userWord[i] && i == letterUpperCase ||
      letterLowerCase) {
      tally++;
    }
  }
  console.log(tally);
  $("#letterResults").html(" There are " + tally + " " + userLetter + "'s  in the word " + userWord);
  console.log("apple");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainPage">
  <h2>Find the Letter in the Word</h2>
  <h4>Enter a word and select a letter to see how many times that letter appears in the word</h2>
    <p>Enter below:</p>
    <br/> Word:
    <input id="word" type="text" name="word"><br/><br/> Letter: <input id="letter" type="text" name="letter"><br/><br/>
    <br/>
    <br/>
    <button id="submit" type="button" name="submit" onclick="checkWordAndLetter()">submit</button>
    <p id="letterResults"></p>
</div>

Answer 1

The easiest option here, without changing the rest of your code, is to upper (or lower) case both sides of the equation so you are comparing like for like.

function checkWordAndLetter() {
  var userWord = $("#word").val();
  var userLetter = $("#letter").val();
  var userWordUpper = userWord.toUpperCase();
  var userLetterUpper = userLetter.toUpperCase();
  var tally = 0;
  for (var i = 0; i < userWord.length; i++) {
    if (userLetterUpper == userWordUpper[i]) {
      tally++;
    }
  }
  $("#letterResults").html(" There are " + tally + " " + userLetter + "'s in the word " + userWord);
}
$("#word,#letter").change(checkWordAndLetter)

checkWordAndLetter();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='word' value='hello'/>
<input type='text' id='letter' value='l' />
<div id='letterResults'></div>

---

In your original code, this line:

if (userLetter == userWord[i] && i == letterUpperCase || letterLowerCase) {

could have been:

if (letterUpperCase == userWord[i] || letterLowerCase == userWord[i]) {

---

Another option might be to use .split() which separates the string into an array by breaking on the specified character. Normally this would be ,, but you can use any letter:

var tally = userWordUpper.split(userLetterUpper).length - 1;

function checkWordAndLetter() {
  var userWord = $("#word").val();
  var userLetter = $("#letter").val();

  var userWordUpper = userWord.toUpperCase();
  var userLetterUpper = userLetter.toUpperCase();

  var tally = userWordUpper.split(userLetterUpper).length - 1;

  $("#letterResults").html(" There are " + tally + " " + userLetter + "'s in the word " + userWord);
}
$("#word,#letter").change(checkWordAndLetter)

checkWordAndLetter();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='word' value='hello' />
<input type='text' id='letter' value='l' />
<div id='letterResults'></div>

---

A further option would be use to a regex (edit: see Rory's answer, no need to repeat here) - the benefit of a regex is that you don't need to convert to upper/lower first.