Why getElementById works but getElementByClassName doesn't in clearing text?

Question

I'm working on a project so this might not be helpful for others but it would be helpful for me if anyone is willing to solve my problem. So this post is more of homework problem.

This project is all about guessing correct word which I'm getting using API and there are 6 total chances .The user exhaust one chance as soon he type 5 word, hit enter but his guess is not correct.

So after 6 round I want to clear all the word typed by user and give him another 6 round and so on..

But on line 89 in index.js when I'm trying to clear innerText using id attribute, that particular letter gets cleared.

But on line 90 in index.js when I tried to clear innerText using class attribute, it does not clear letter. By clearing letter I mean making innerText empty.

So my question is why in my index.js line 89 works in clearing letter but line 90 doesn't work and how I can clear all letter after user has exhausted given round.

Since everyone was saying it return NodeList or HTMLcollection so I tried to replace line 90 in index.js withdocument.getElementsByClassName("scoreboard-letter") .forEach((element) => (element.style.innerText = "")); but even that doesn't cleared innerText.

const letters = document.querySelectorAll(".scoreboard-letter");
const loadingDiv = document.querySelector(".scoreboard");
const ANSWER_LENGTH = 5;
const ROUNDS = 6;

async function init() {
  //state for the app
  let currentGuess = "";
  let currentRow = 0;
  let done = false;
  let isLoading = true;

  //using api to grab word of the day
  const res = await fetch("https://words.dev-apis.com/word-of-the-day").then(
    (res) => res.json()
  );
  const word = res.word.toUpperCase();
  console.log(word);
  const wordParts = word.split("");
  setLoading(isLoading);
  isLoading = false;
  function isLetter(letter) {
    return /^[a-zA-Z]$/.test(letter);
  }

  // user adds a letter to the current guess
  function addLetter(letter) {
    if (currentGuess.length < ANSWER_LENGTH) {
      // add letter to the end
      currentGuess += letter;
    } else {
      // replace the last letter
      current = currentGuess.substring(0, currentGuess.length - 1) + letter;
    }
    letters[ANSWER_LENGTH * currentRow + currentGuess.length - 1].innerText =
      letter;
  }

  async function commit() {
    if (currentGuess.length < ANSWER_LENGTH) {
      //do nothing
      return;
    }
    //making array of guessedWord
    const guessParts = currentGuess.split("");

    const map = makeMap(wordParts);
    console.log(map);
    let allRight = true;

    for (let i = 0; i < ANSWER_LENGTH; i++) {
      if (guessParts[i] === wordParts[i]) {
        letters[currentRow * ANSWER_LENGTH + i].classList.add("correct");
        map[guessParts[i]]--;
      }
    }
    // second pass finds close and wrong letters
    // we use the map to make sure we mark the correct amount of
    // close letters
    for (let i = 0; i < ANSWER_LENGTH; i++) {
      if (guessParts[i] === wordParts[i]) {
        //do nothing
      } else if (wordParts.includes(guessParts[i]) && map[guessParts[i]] > 0) {
        // mark as close
        allRight = false;
        letters[currentRow * ANSWER_LENGTH + i].classList.add("close");
        map[guessParts[i]]--;
      } else {
        //wrong
        allRight = false;
        letters[currentRow * ANSWER_LENGTH + i].classList.add(
          "wrong",
          "invalid"
        );
        // letters[currentRow * ANSWER_LENGTH + i].classList.add("invalid");
      }
    }
    currentRow++;
    let check = currentGuess.split(",");
    currentGuess = "";
    if (allRight) {
      // win
      alert("you win");
      document.querySelector(".spiral").classList.add("hidden");
      done = true;
    } else if (currentRow === ROUNDS) {
      // lose
      alert(`you lose, the word was ${word}`);
      document.getElementById("letter-0").innerText = "";
      document.getElementsByClassName("scoreboard-letter")
      .forEach((element) => (element.style.innerText = ""));
      //document.getElementsByClassName("scoreboard-letter").innerText = "";
      done = true;
    }
  }
  function setLoading(isLoading) {
    console.log(isLoading);
    loadingDiv.classList.toggle("hidden", !isLoading);
  }

  function backspace() {
    currentGuess = currentGuess.substring(0, currentGuess.length - 1);
    letters[ANSWER_LENGTH * currentRow + currentGuess.length].innerText = "";
  }

  document.addEventListener("keydown", function handleKeyPress(event) {
    if (done || isLoading) {
      //do nothing
      return;
    }
    const action = event.key;
    console.log(action);
    if (action === "Enter") {
      commit();
    } else if (action === "Backspace") {
      backspace();
    } else if (isLetter(action)) {
      addLetter(action.toUpperCase());
    } else {
      // do nothing
    }
  });
}
function makeMap(array) {
  const obj = {};
  for (let i = 0; i < array.length; i++) {
    if (obj[array[i]]) {
      obj[array[i]]++;
    } else {
      obj[array[i]] = 1;
    }
  }
  return obj;
}
init();

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: center;
    text-decoration: none;
    list-style: none; 
}
body{
    color: #333;
}
.brand {
    padding: 4%;
    font-size:16px;
    font-family:system-ui, -apple-system;
}
.spiral{
    margin-top: 3%;
    margin:2%;
}

.scoreboard{
    display: grid;
    max-width: 295px;
    width: 100%;
    margin: 10px auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 5px;
}
.scoreboard-letter{
    height: 45px;
    width: 45px;
    font-size: 30px;
    text-transform: uppercase;
    border: 3px solid #ccc;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.correct {
    background-color: darkgreen;
    color: white;
}
.close {
    background-color: goldenrod;
    color: white;
}
.wrong {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255); 
}
.invalid {
    animation: flash 1s;
    border-radius: 1px solid red;
}
   /* flashes red border and then fades back to gray */
  
@keyframes flash {
    5% {
    border-color: crimson;
    }
    100% {
    border-color: #ccc;
    }
}
.spiral {
    font-size: 40px;
    animation: spin 1.5s linear infinite;
}
   /* rotates clockwise indefinitely  */
@keyframes spin {
    to {
    transform: rotate(360deg);
    }
}
 /* visibility hidden means the item is still there and taking up space
     but just not shown. display: none doesn't take up space  */
.hidden {
    visibility: hidden;
}
.spinning{
    display: flex;
    align-items: center;
    justify-content: center;
}
  /* winner animation  */
@keyframes rainbow {
    100%,
    0% {
    color: rgb(255, 0, 0);
    text-rendering:optimizeSpeed;
    }
    8% {
    color: rgba(209, 125, 7, 0.7);
    text-decoration: solid;
    }
    16% {
    color: rgb(255, 255, 1);
    }
    25% {
    color: rgb(85, 0, 0);
    }
    33% {
    color: rgb(0, 0, 255);
    }
    41% {
    color: rgb(255, 0, 251);
    }
    50% {
    color: rgb(255, 0, 119);
    }
    58% {
    color: rgb(22, 66, 111);
    }
    66% {
    color: rgb(0, 0, 255);
    }
    75% {
    color: rgb(127, 0, 255);
    }
    83% {
    color: rgb(255, 0, 255);
    }
    91% {
    color: rgb(0, 255, 238);
    }
}
.winner {
    animation: rainbow 4s infinite linear;
}



  
    
    
    
    Word Master
    
    
  
  
    
      
        Word Masters

Why getElementById works but getElementByClassName doesn't in clearing text?

0 Answers