[Dúvida] Não troca as notícias

Olá, Pedro!

Vendo o seu código, percebi que você está tentando remover o elemento com a classe '.escondeVisualmente' antes de fazer a comparação entre 'data-sliderItem' e 'data-noticia'. Isso pode estar causando um erro se o elemento não existir no momento em que a função é executada.

Nesse caso peço que tente algo assim:

btns.forEach(function(btn) {
  btn.addEventListener('click', function() {

    btns.forEach(function(btnRemoveClass) {
      btnRemoveClass.classList.remove('listaDeArtigos-slider-item--ativo');
    })


    this.classList.add('listaDeArtigos-slider-item--ativo');


    noticias.forEach(function(noticia) {
      noticia.style.display = 'none';
    });


    noticias.forEach(function(noticia) {
      if (this.getAttribute('data-sliderItem') === noticia.getAttribute('data-noticia')) {
        noticia.style.display = 'block';
      }
    }.bind(this)); 
});

Este código primeiro remove a classe 'ativo' de todos os botões, adiciona a classe 'ativo' ao botão clicado, esconde todas as notícias e depois mostra a notícia que corresponde ao botão clicado.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Não resolveu, eu copiei e colei, aí ficou assim:

btns.forEach(function(btn) {
  btn.addEventListener('click', function() {

    btns.forEach(function(btnRemoveClass) {
      btnRemoveClass.classList.remove('listaDeArtigos-slider-item--ativo');
    })


    this.classList.add('listaDeArtigos-slider-item--ativo');


    noticias.forEach(function(noticia) {
      noticia.style.display = 'none';
    });


    noticias.forEach(function(noticia) {
      if (this.getAttribute('data-sliderItem') === noticia.getAttribute('data-noticia')) {
        noticia.style.display = 'block';
      }
    }.bind(this)); 
});

    document.querySelector('.listaDeArtigos-slider-item .escondeVisualmente').remove();
    this.append(indicadorSlideAtual);
    
    // Remove classe 'ativo' dos outros botoes
    btns.forEach(function(btnRemoveClass) {
      btnRemoveClass.classList.remove('listaDeArtigos-slider-item--ativo')
    })

    this.classList.add('listaDeArtigos-slider-item--ativo')
  })

Olá Pedro!

Esse código foi testado se baseando no código da aula e lá funcionou normalmente, sendo assim por gentileza compartilhe o seu projeto completo conosco com um print do seu erro por gentileza.

Você pode compartilhar ele tanto via github, como pelo drive se for pelo drive lembre-se de deixar público.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Ok, este é o Link do Git do projeto: https://github.com/pedroscfa/acessibilidade__apeperia.git

Olá Pedro, tudo bem?

Gostaria de agradecer por enviar o seu projeto, dessa forma, pois ajuda muito a encontrar a solução do erro.

No seu código o erro está acontecendo por conta de um certa confusão e devemos reformular alguns passos como o de seleção de Elementos, pois os, Os seletores utilizados para capturar os botões e os slides não estão corretos, o que pode resultar em elementos incorretos sendo selecionados.

Verificando se seletores .listaDeArtigos-slider-item e .listaDeArtigos-item estão selecionando corretamente os botões e os slides, respectivamente. Isso pode ser feito inspecionando o HTML ou imprimindo os elementos selecionados no console para garantir que estão corretos.

Outro erro foi a lógica para mostrar os Slides. Foi necessário ajustar a lógica para exibir os slides corretamente quando os botões são clicados. Isso pode ser feito associando cada botão a um slide específico com base em seu índice.

Por fim a manipulação do Indicador do Slide Atual, isso pode envolver a adição e remoção da classe de indicador ativo, bem como a atualização do conteúdo do indicador.

Depois de alguns testes cheguei nessa solução e funcionou aqui:

Código Final:

// Variáveis
var btns = document.querySelectorAll('.listaDeArtigos-slider-item');
var noticias = document.querySelectorAll('.listaDeArtigos-item');
var indicadorSlideAtual = document.createElement('span');
indicadorSlideAtual.classList.add('escondeVisualmente');
indicadorSlideAtual.textContent = 'Slide Atual';


// Adiciona evento de clique para cada botão
btns.forEach(function(btn, index) {
  btn.addEventListener('click', function() {
    // Remove a classe ativa de todos os botões
    btns.forEach(function(btnRemoveClass) {
      btnRemoveClass.classList.remove('listaDeArtigos-slider-item--ativo');
    });


    this.classList.add('listaDeArtigos-slider-item--ativo');

    noticias.forEach(function(noticia) {
      noticia.style.display = 'none';
    });

    noticias[index].style.display = 'block';

    if (this.querySelector('.escondeVisualmente')) {
      this.querySelector('.escondeVisualmente').remove();
    }
    this.appendChild(indicadorSlideAtual);
  });
});

Seu código deu até uma reduzida, digamos assim.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!