JavaScript Politicordle Wordle Copycat conditional JS for incorrect spot correct letter

[Edrol97]

Hi all,

I'm making a vaguely copycat wordle but with a hint section for users to get clues. I've managed on the dev version of the site to add in an if statement for the correct and an else statement for the incorrect letter, but how would I add an else statement for wrong place right letter? Relevant code for conditional letter changing so far below.

function initGame(e) {
  let key = e.target.value.toLowerCase();
  if (key.match(/^[A-Za-z-0-9]+$/)) {
    inputs.querySelectorAll("input")[counter].value = key;
    if (word[counter] == key) {
      correctLetters += key;
      inputs.querySelectorAll("input")[counter].style.background =
        "url(img/background/Politicordle%20right%20letter.png) no-repeat left top";
    } else {
      inputs.querySelectorAll("input")[counter].style.background =
        "url(img/background/Politicordle%20wrong.png) no-repeat left top";
    }
    inputs.querySelectorAll("input")[counter].style.backgroundSize =
      "100% 100%";
    counter = counter + 1;
  }

Full JS of whole file:

const inputs = document.querySelector(".inputs"),
  hintTag = document.querySelector(".hint span"),
  guessLeft = document.querySelector(".guess-left span"),
  wrongLetter = document.querySelector(".wrong-letter span"),
  wrongPlaceLetter = document.querySelector(".wrong-place span");
(resetBtn = document.querySelector(".reset-btn")),
  (typingInput = document.querySelector(".typing-input"));
let word,
  maxGuesses,
  incorrectLetters = [],
  correctLetters = [],
  gamelength = [],
  counter = 0,
  guesses = 0;
function addinputboxes() {
  let html = ""; // "<div class='guess" + guesses + "'>";
  for (let i = 0; i < word.length; i++) {
    html += `<input type="text" disabled>`;
  }
  // html += "</div>";
  inputs.innerHTML = html;
}
function randomWord() {
  let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
  word = ranItem.word;
  maxGuesses = word.length;
  correctLetters = [];
  incorrectLetters = [];
  counter = 0;
  hintTag.innerText = ranItem.hint;
  guessLeft.innerText = maxGuesses;
  wrongLetter.innerText = incorrectLetters;
  addinputboxes();
}
randomWord();
function initGame(e) {
  let key = e.target.value.toLowerCase();
  if (key.match(/^[A-Za-z-0-9]+$/)) {
    inputs.querySelectorAll("input")[counter].value = key;
    if (word[counter] == key) {
      correctLetters += key;
      inputs.querySelectorAll("input")[counter].style.background =
        "url(img/background/Politicordle%20right%20letter.png) no-repeat left top";
    } else {
      inputs.querySelectorAll("input")[counter].style.background =
        "url(img/background/Politicordle%20wrong.png) no-repeat left top";
    }
    inputs.querySelectorAll("input")[counter].style.backgroundSize =
      "100% 100%";
    counter = counter + 1;
  }
  /*if (
    key.match(/^[A-Za-z]+$/) &&
    !incorrectLetters.includes(` ${key}`) &&
    !correctLetters.includes(key)
  ) {
    if (word.includes(key)) {
      for (let i = 0; i < word.length; i++) {
        if (word[i] == key) {
          correctLetters += key;
          inputs.querySelectorAll("input")[i].value = key;
          inputs.querySelectorAll("input")[i].style.background =
            "url(img/background/Politicordle%20right%20letter.png) no-repeat left top";
          inputs.querySelectorAll("input")[i].style.backgroundSize =
            "100% 100%";
        }
      }
    } else {
      maxGuesses--;
      incorrectLetters.push(` ${key}`);
    }
    guessLeft.innerText = maxGuesses;
    wrongLetter.innerText = incorrectLetters;
  }*/
  typingInput.value = "";
  setTimeout(() => {
    if (correctLetters.length === word.length) {
      alert(`Congrats! You're as smart as Jacob Rees-Mogg pretends to be.`);
      return randomWord();
    } else if (maxGuesses < 1) {
      alert("You're out of tries. The speaker has expelled you from the House");
      for (let i = 0; i < word.length; i++) {
        inputs.querySelectorAll("input")[i].value = word[i];
      }
    }
  }, 100);
}
resetBtn.addEventListener("click", randomWord);
typingInput.addEventListener("input", initGame);
inputs.addEventListener("click", () => typingInput.focus());
document.addEventListener("keydown", () => typingInput.focus());
if (currentQuestion < quizData.length) {
  showQuestion();
} else {
  showResult();
}
function showResult() {
  quiz.innerHTML = `<h1>${getScoreMessage()}</h1>
    <p>Your score: ${score}/${quizData.length}</p>
  `;
}
showHint();

 

[simong1993]

Hey Edrol97,

Awesome project you’ve got going here! I’m more of a Python coder, but I’ll give this a shot. For the "wrong place, right letter" check, you can add an else if for letters that are in the word but in the wrong position. Here’s the code:

if (word[counter] === key) {
    correctLetters += key;
    inputs.querySelectorAll("input")[counter].style.background = "url(img/background/Politicordle%20right%20letter.png) no-repeat left top";
} else if (word.includes(key)) {
    inputs.querySelectorAll("input")[counter].style.background = "url(img/background/Politicordle%20wrong-place.png) no-repeat left top";
    // Ensure you have an image for this!
} else {
    inputs.querySelectorAll("input")[counter].style.background = "url(img/background/Politicordle%20wrong.png) no-repeat left top";
}

Not 100% sure since I’m more of a Python guy, but this should help steer you in the right direction. Let me know how it goes!