How to Change H1 using Javascript?

Question

I have a product gallery and the side there are some buttons that are the categories of these products (buttons: cabinet, monitors, mouse, chairs, etc), when I click in this category, a toggle active only products of that specific category.

However, I want above these products to contain a title that will initially look like this: "Products" (this is the default), but when I click on the Cabinet category, for example, this title will be changed to "Cabinets". I could tell?

Well, I want that to happen with all the other buttons always changing the title at runtime.

I even tried to create a function by clicking using GetElementById along with a IF ELSE, but it applies the first validation only.

Someone who’s done something like this could help me?

Important: I’m picking up the buttons from the database, simply I did an instruction WHILE that will repeat the buttons according to the number of categories registered in the database, so it does not have so right away, as add a different function for each button. There’s a way, but not so easily.

Answer 1

See if this is what you need:

<h2 id="meuh2">Produtos</h2>

<p>Nonononononono nonono nonono.</p>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

<p>
<select id="s" onchange="esse_mudou(this.value)">
  <option>Produtos</option>
  <option>Gabinetes</option>
  <option>Sabonete líquido</option>
  <option>Ração para cágados</option>
  <option>Buzina de calhambeque</option>
</select>
</p>

<p>
<button onclick="botao_clicado(this)">Produtos</button>
<button onclick="botao_clicado(this)">Gabinetes</button>
<button onclick="botao_clicado(this)">Sabonete líquido</button>
<button onclick="botao_clicado(this)">Ração para cágados</button>
<button onclick="botao_clicado(this)">Buzina de calhambeque</button>
</p>

<script>
    function esse_mudou(valor) {
        muda_h2(valor);
    }

    function botao_clicado(botao) {
        /*faz algo genérico para todos os botões */

        muda_h2(botao.innerHTML);
    }

    function muda_h2(texto) {
        var h2 = document.getElementById('meuh2');
        h2.innerHTML = texto;
    }
</script>

Answer 2

An alternative using Jquery

$(".btn").click(function(){
    var name = $(this).text();
    $("#meuh1").html(name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button class=btn>Gabinetes</button>

<button class=btn>Processadores</button>

<button class=btn>Discos Rígidos</button>

<button class=btn>Memórias RAM e ROM</button>

text()- returns the text of the element

$(this)

• $() is the jQuery constructor function.
• this is a reference to the DOM element invoked.
• Then in $(this) you’re passing this for the function $() as a parameter, in this case the text of the element text()

---

---

Changing the H1 and presenting the corresponding text

$(".btn").click(function(){
    $('div[id^="div_"]').hide(); 
    var name = $(this).text();
    $("#meuh1").html(name);
    var id = $(this).attr('id');
    $("#div_"+id).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button id="bt1" class=btn>Gabinetes</button>

<button id="bt2" class=btn>Processadores</button>

<button id="bt3" class=btn>Discos Rígidos</button>

<button id="bt4" class=btn>Memórias RAM e ROM</button>


<div id="div_bt1" style="display:none">Gabinetes de várias marcas e modelos</div>
<div id="div_bt2" style="display:none">Processadores de última geração</div>
<div id="div_bt3" style="display:none">Discos Rígidos de até 4MB, rs :)</div>
<div id="div_bt4" style="display:none">Memórias RAM e ROM</div>