How to change H1 using Javascript?

Navigation
0

I have a product gallery and the side there are some buttons which are the categories of these products (buttons: cabinet, monitors, mouse, chairs, etc.), when I click on this category, a toggle only activates the 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, that title will change to "Cabinets". Did you understand?

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

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

Someone who has done something similar could help me?

Important : I am getting the database buttons, I simply made a WHILE statement that will repeat the buttons according to the number of categories registered in the database, so you have to face it, like adding a different function for each button. It has how, but not so easily.

    
asked by anonymous 22.06.2018 / 18:18

2 answers

1

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><h1id="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 constructor function of jQuery.
  • this is a reference to the DOM element invoked.
  • Then in $(this) you are passing this to the $() function as parameter, in the case in question the text of the element text()
  

Changing H1 and displaying 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><h1id="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>
    
22.06.2018 / 21:00
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>
    
22.06.2018 / 18:26
Give effect on image and hover to leave color again Redirect to the mobile version of the site via javascript or responsive design, what is the best option? [closed]