How to get each value from the same class once onclick JAVASCRIPT

Question

This is my code

            <div class="selecionar" onclick="abrirFiltroCategoria()">
                <p class="valueCategoria">Selecionar categoria</p>
            </div>
            <div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
                <button class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(this)">Passeio</button>
                <button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(this)">SUV/Pickup/4x4</button>
                <button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(this)">Van e Utilitário</button>
                <button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(this)">Caminhão e Carga</button>
            </div>

and my js

    function mostrarValueCategoria() {
        var name = document.querySelector('.button').value;
        document.querySelector('.valueCategoria').innerHTML = name;
    }

What I need to solve: At each click, get the current value of the button I clicked, erasing the previous one.

Answer 1

You pass this as parameter, you can use it into your function to get the current value.

function mostrarValueCategoria(el) {
  console.log(el.value)
  document.querySelector('.valueCategoria').innerText = el.value;
}

<div class="selecionar" onclick="abrirFiltroCategoria()">
  <p class="valueCategoria">Selecionar categoria</p>
</div>
<div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
  <button class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(this)">Passeio</button>
  <button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(this)">SUV/Pickup/4x4</button>
  <button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(this)">Van e Utilitário</button>
  <button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(this)">Caminhão e Carga</button>
</div>

Note You can use innerText instead innerHTML to show the value.