Javascript duas repeticionais dentro de uma condicional

[Bulgarellllli]

boa tarde pessoal. estou tentando fazer um script que vai mudar os textos do site de acordo com o idioma escolhido. ele é bom simples, o código é esse:

const 
    itemsToChoice = document.querySelectorAll(".choice"),
    itemsPortuguese = document.getElementsByClassName("get_pt"),
    itemsEnglish = document.getElementsByClassName("get_en")

    console.log(itemsToChoice)
    console.log(itemsPortuguese)
    console.log(itemsEnglish)

function selectedItem(event) {
    const language = event.target.id
    if (language == "english") {
        for (let i = 0; i <= itemsEnglish.length; i++) {
            itemsEnglish[i].style.display="block"
        }
        for (let x = 0; x <= itemsPortuguese.length; x++) {
            itemsPortuguese[x].style.display="none"
        }
    } else {
        for (let i = 0; i <= itemsEnglish.length; i++) {
            itemsEnglish[i].style.display="none"
        }
        for (let x = 0; x <= itemsPortuguese.length; x++) {
            itemsPortuguese[x].style.display="block"
        }
    }
}


for (const item of itemsToChoice) {
    console.log(1)
    item.addEventListener("click", selectedItem)
}

o maior problema está nessa condicional, onde coloquei dois "for". apenas o primeiro é executado, e o segundo esquecido:

if (language == "english") {
        for (let i = 0; i <= itemsEnglish.length; i++) {
            itemsEnglish[i].style.display="block"
        }
        for (let x = 0; x <= itemsPortuguese.length; x++) {
            itemsPortuguese[x].style.display="none"
        }
    } else {
        for (let i = 0; i <= itemsEnglish.length; i++) {
            itemsEnglish[i].style.display="none"
        }
        for (let x = 0; x <= itemsPortuguese.length; x++) {
            itemsPortuguese[x].style.display="block"
        }
    }

antes usava a variável i em ambas as repeticionais e acabei mudando achando que era esse o erro. vocês tem alguma solução para isso? Desde já agradeço muito pela atenção!

 

[GabrielSennaMs]

@Bulgarellllli O problema está na sua condição de loop nos for.

 

Você usa menor que e igual "<=", e com essa condição o loop é executado uma vez a mais que o valor do array com os elementos.

 

Colocando só menor que o loop vai funcionar.

if (language == "english")
{
  for (let i = 0; i < itemsEnglish.length; i++)
  {
    console.log(itemsEnglish[i]);
    itemsEnglish[i].style.display = "block";    
  }

  for (let x = 0; x < itemsPortuguese.length; x++)
  {
    itemsPortuguese[x].style.display = "none";
  }
}
else
{
  for (let i = 0; i < itemsEnglish.length; i++)
  {
    itemsEnglish[i].style.display = "none";
  }

  for (let x = 0; x < itemsPortuguese.length; x++)
  {
    itemsPortuguese[x].style.display = "block";
  }
 }

Dessa forma deve funcionar!

[Bulgarellllli]

@GabrielSennaMs mano, muito obrigado mesmo, tu me salvou. consegue me explicar porque a fato do "for", exeutar uma repetição a mais travava o resto da estrutura? muito obrigado novamente pela ajuda, tu é o cara!