What did i do wrong in this JavaScript code

August 19, 2022

I am learning javascript nowadays and i am trying to make a word scramble game via youtube video. When i hit check it always says not correct how can i fix this problem ? What did i do wrong ? (This is my first entry if i do something wrong or deficent please let me know + sorry for my bad english 🙂 )

const wordText = document.querySelector(".word"),
  hintText = document.querySelector(".hint span"),
  inputField = document.querySelector(".input"),
  refreshBtn = document.querySelector(".refresh-word"),
  checkBtn = document.querySelector(".check-word");

// Words/Kelimeler
const words = [
  {
    word: "addition",
    hint: "The process of adding numbers",
  },
  {
    word: "meeting",
    hint: "Event in which people come together",
  },
  {
    word: "number",
    hint: "Math symbol used for counting",
  },
  {
    word: "exchange",
    hint: "The act of trading",
  },
  {
    word: "canvas",
    hint: "Piece of fabric for oil painting",
  },
  {
    word: "garden",
    hint: "Space for planting flower and plant",
  },
  {
    word: "position",
    hint: "Location of someone or something",
  },
  {
    word: "feather",
    hint: "Hair like outer covering of bird",
  },
  {
    word: "comfort",
    hint: "A pleasant feeling of relaxation",
  },
  {
    word: "tongue",
    hint: "The muscular organ of mouth",
  },
  {
    word: "expansion",
    hint: "The process of increase or grow",
  },
  {
    word: "country",
    hint: "A politically identified region",
  },
  {
    word: "group",
    hint: "A number of objects or persons",
  },
  {
    word: "taste",
    hint: "Ability of tongue to detect flavour",
  },
  {
    word: "store",
    hint: "Large shop where goods are traded",
  },
  {
    word: "field",
    hint: "Area of land for farming activities",
  },
  {
    word: "friend",
    hint: "Person other than a family member",
  },
  {
    word: "pocket",
    hint: "A bag for carrying small items",
  },
  {
    word: "needle",
    hint: "A thin and sharp metal pin",
  },
  {
    word: "expert",
    hint: "Person with extensive knowledge",
  },
  {
    word: "statement",
    hint: "A declaration of something",
  },
  {
    word: "second",
    hint: "One-sixtieth of a minute",
  },
  {
    word: "library",
    hint: "Place containing collection of books",
  },
];

let correctWord;

const initGame = () => {
  let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
  let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
  for (let i = wordArray.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
    let temp = wordArray[i];
    wordArray[i] = wordArray[j];
    wordArray[j] = temp;
  }

  wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
  hintText.innerText = randomObj.hint;
  correctWord = randomObj.word.toLowerCase;
  console.log(randomObj);
};

const checkWord = () => {
  let userWord = inputField.value.toLocaleLowerCase();
  console.log(userWord);
  if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
  alert(`Congrats! ${userWord.toUpperCase()} is correct`);
  if (!userWord) return alert(`Please enter word`);
};

refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);

initGame();

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2c3333;
}

.container {
  width: 450px;
  background: #fff;
  border-radius: 7px;
}

.container h2 {
  font-size: 25px;
  font-weight: 500;
  padding: 18px 25px;
  border-bottom: 1px solid #ccc;
}

.container .content {
  margin: 25px 20px 35px;
}

.content .word {
  font-size: 33px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 25px;
  margin-right: -25px;
}

.content .details {
  margin: 25px 0 20px;
}
.details p {
  font-size: 18px;
  margin-bottom: 10px;
}

.details p b {
  font-weight: 500;
}

.content input {
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0 16px;
  border-radius: 5px;
  border: 1px solid #aaa;
  font-size: 18px;
}

.content .buttons {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.buttons button {
  border: none;
  outline: none;
  padding: 15px 0;
  color: white;
  cursor: pointer;
  font-size: 17px;
  border-radius: 5px;
  width: calc(100% / 2- 8px);
}

.buttons .check-word {
  background: #a0d995;
  padding-left: 30px;
  padding-right: 30px;
}

.buttons .refresh-word {
  background: #a5c9ca;
  padding-left: 30px;
  padding-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Word Scramble Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="js/script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h2>Word Scramble Game</h2>
      <div class="content">
        <p class="word"></p>
        <div class="details">
          <p class="hint">Hint:<span></span></p>
          <p class="time">
            Time Left:<span><b>30</b>s</span>
          </p>
        </div>
        <input class="input" type="text" placeholder="Enter a valid word" />
        <div class="buttons">
          <button class="refresh-word">Refresh Word</button>
          <button class="check-word">Check Word</button>
        </div>
      </div>
    </div>
  </body>
</html>

>Solution :

toLowerCase is a function, not a property, so you need to add parenthesis.

correctWord = randomObj.word.toLowerCase();

const wordText = document.querySelector(".word"),
  hintText = document.querySelector(".hint span"),
  inputField = document.querySelector(".input"),
  refreshBtn = document.querySelector(".refresh-word"),
  checkBtn = document.querySelector(".check-word");

// Words/Kelimeler
const words = [
  {
    word: "addition",
    hint: "The process of adding numbers",
  },
  {
    word: "meeting",
    hint: "Event in which people come together",
  },
  {
    word: "number",
    hint: "Math symbol used for counting",
  },
  {
    word: "exchange",
    hint: "The act of trading",
  },
  {
    word: "canvas",
    hint: "Piece of fabric for oil painting",
  },
  {
    word: "garden",
    hint: "Space for planting flower and plant",
  },
  {
    word: "position",
    hint: "Location of someone or something",
  },
  {
    word: "feather",
    hint: "Hair like outer covering of bird",
  },
  {
    word: "comfort",
    hint: "A pleasant feeling of relaxation",
  },
  {
    word: "tongue",
    hint: "The muscular organ of mouth",
  },
  {
    word: "expansion",
    hint: "The process of increase or grow",
  },
  {
    word: "country",
    hint: "A politically identified region",
  },
  {
    word: "group",
    hint: "A number of objects or persons",
  },
  {
    word: "taste",
    hint: "Ability of tongue to detect flavour",
  },
  {
    word: "store",
    hint: "Large shop where goods are traded",
  },
  {
    word: "field",
    hint: "Area of land for farming activities",
  },
  {
    word: "friend",
    hint: "Person other than a family member",
  },
  {
    word: "pocket",
    hint: "A bag for carrying small items",
  },
  {
    word: "needle",
    hint: "A thin and sharp metal pin",
  },
  {
    word: "expert",
    hint: "Person with extensive knowledge",
  },
  {
    word: "statement",
    hint: "A declaration of something",
  },
  {
    word: "second",
    hint: "One-sixtieth of a minute",
  },
  {
    word: "library",
    hint: "Place containing collection of books",
  },
];

let correctWord;

const initGame = () => {
  let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
  let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
  for (let i = wordArray.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
    let temp = wordArray[i];
    wordArray[i] = wordArray[j];
    wordArray[j] = temp;
  }

  wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
  hintText.innerText = randomObj.hint;
  correctWord = randomObj.word.toLowerCase();
};

const checkWord = () => {
  let userWord = inputField.value.toLocaleLowerCase();
  if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
  alert(`Congrats! ${userWord.toUpperCase()} is correct`);
  if (!userWord) return alert(`Please enter word`);
};

refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);

initGame();

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2c3333;
}

.container {
  width: 450px;
  background: #fff;
  border-radius: 7px;
}

.container h2 {
  font-size: 25px;
  font-weight: 500;
  padding: 18px 25px;
  border-bottom: 1px solid #ccc;
}

.container .content {
  margin: 25px 20px 35px;
}

.content .word {
  font-size: 33px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 25px;
  margin-right: -25px;
}

.content .details {
  margin: 25px 0 20px;
}
.details p {
  font-size: 18px;
  margin-bottom: 10px;
}

.details p b {
  font-weight: 500;
}

.content input {
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0 16px;
  border-radius: 5px;
  border: 1px solid #aaa;
  font-size: 18px;
}

.content .buttons {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.buttons button {
  border: none;
  outline: none;
  padding: 15px 0;
  color: white;
  cursor: pointer;
  font-size: 17px;
  border-radius: 5px;
  width: calc(100% / 2- 8px);
}

.buttons .check-word {
  background: #a0d995;
  padding-left: 30px;
  padding-right: 30px;
}

.buttons .refresh-word {
  background: #a5c9ca;
  padding-left: 30px;
  padding-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Word Scramble Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="js/script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h2>Word Scramble Game</h2>
      <div class="content">
        <p class="word"></p>
        <div class="details">
          <p class="hint">Hint:<span></span></p>
          <p class="time">
            Time Left:<span><b>30</b>s</span>
          </p>
        </div>
        <input class="input" type="text" placeholder="Enter a valid word" />
        <div class="buttons">
          <button class="refresh-word">Refresh Word</button>
          <button class="check-word">Check Word</button>
        </div>
      </div>
    </div>
  </body>
</html>