-1

Estou começando no JavaScript e me surgiu uma pequena dúvida.

Eu tenho mais de 5 parágrafos diferentes. Sempre quando clicar no botão eu quero que ele remova o parágrafo que está na tela e adicione o parágrafo seguinte, e prosseguir assim até o último parágrafo.

Eu consigo trocar somente do primeiro para o segundo, mas depois não consigo pensar em como fazer para alterar do segundo para o terceiro, etc.

Meu código:

const paragrafo = document.querySelector('.paragrafo');
const botao = document.querySelector('.botao');

botao.addEventListener('click', () => {
    paragrafo.innerText = 'parágrafo 2'
})

Agradeço a ajuda.

1 Resposta 1

-1

Eu coloquei os "parágrafos" em uma lista.
No início da página, ele pega o primeiro texto com o index = 0.
Ao clicar no botão, ele troca o index com o operador ternário adicionando index++ e caso o index for o último da lista, ele volta para o primeiro texto.

lista_paragrafos = ['AAAAAAAAAAA','BBBBBBBB','CCCCCC','DDDD','EEEE', 'F'];

const paragrafo = document.querySelector('.paragrafo');
const botao = document.querySelector('.botao');
var index = 0;

window.onload = function() {
    paragrafo.innerHTML = lista_paragrafos[index]
};

botao.addEventListener('click', () => {
    index == lista_paragrafos.length - 1 ? index = 0 : index++
    paragrafo.innerText = lista_paragrafos[index];
})
<!DOCTYPE html>
<html lang="pt">
<head>
    <title>Document</title>
</head>
<body>
    <p class="paragrafo"></p>
    <button class="botao">MUDAR</button>
</body>
<script src="script.js"></script>
</html>

1
  • Muito obrigado amigo, funcionou certinho.
    – Bruno
    Commented 17/11/2022 às 14:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .