[RESOLVIDO] Alteração de H1 por javascript

Front-end JavaScript
#1

Olá pessoal!

Tenho um probleminha e gostaria da ajuda de vocês, se possível.
Essa dúvida centra-se mais na lógica para desenvolve-la do que as propriedades que deve-se utilizar.

É o seguinte:
Eu tenho uma galeria de produtos, ok? Ao lado existe alguns botões que são as categorias desses produtos (Botões: Gabinete, monitores, mouse, cadeiras, etc), quando eu clicar nessa categoria, um toggle ativa somente os produtos daquela categoria específica.

Até aí tudo bem, no entanto, eu quero que acima desses produtos contenha um título que inicialmente será assim: “Produtos” (esse é o padrão, isto é, um H1), mas quando eu clicar na categoria Gabinete, por exemplo, esse título será alterado para “Gabinetes”. Deu pra entender? Espero que sim, hehehe…

Pois bem, eu quero que isso aconteça com todos os outros botões sempre alterando o titulo em Run Time, blz?

Eu até tentei criar uma function ao clicar usando GetElementById junto com uma IF ELSE, mas ele aplica a primeira validação apenas.

Alguém que já fez algo parecido poderia me ajudar??? Por favor, esse tipo de recurso é muito importante e eu não sou o melhor em JS, se puderem me ajudar e elucidar.

OBSERV. Importante: Eu estou pegando os botões do banco de dados, simplesmente eu fiz uma instrução WHILE que vai repetir os botões de acordo com a quantidade de categorias cadastradas no banco de dados, então não tem assim logo de cara, como add uma função diferente para cada botão, ok? Tem como, mas não tão facilmente.

Por favor aos que puderem ajudar, serei muito grato!

Att. =D

#2

Está usando javascript puro ou algum framework?
Independente, pelo que se vê aqui, você pode definir um id para o elemento h1 e, assim, o resto você deve saber, né?

<h1 id="omeuh1">Valor qualquer</h1>

function blablabla() {
    document.getElementById('omeuh1').innerHTML = 'Novo valor que quero que apareça';
}
#3

Sim, mano, mas isso é tranquilo pq é 1 elemento. Como ficaria se eu tenho 6 botoes para mudar o mesmo H1? Ou seja, o novo botao altera o texto do h1 atual e assim sucessivamente…

#4

Fica a mesma coisa.
Na verdade, muda pouca coisa, mas a ideia é a mesma.

#5

Na estrutura do while você pode colocar uma mesma função recebendo um parâmetro diferente de acordo com o item do loop, imagino que você esteja fazendo isso com os textos dos botões né…

Aí na função você pode escolher tratar o parâmetro usando if/else ou simplesmente passar o texto direto para o H1.

por exemplo:

< h1 id="titulo">Produtos</ h1>

<button onclick="mudarTitulo('Item 1')">Item 1</button>
<button onclick="mudarTitulo('Item 2')">Item 2</button>
<button onclick="mudarTitulo('Item 3')">Item 3</button>

function mudarTitulo(novoTitulo) {
    document.querySelector("#titulo").innerHTML = novoTitulo;
}
#6

GG IZI!

Fechou… Era isso mesmo que eu precisava!

Vlwww manoo… <3

1 curtida