CODEWITHSUNDEEP
javascriptreturn-valueinnerhtml
Kaio Almeida
Kaio Almeida

Reputation: 59

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

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.

Upvotes: 2

Views: 1178

Answers (5)

fiveobjects
fiveobjects

Reputation: 4289

You have to capture the value from the specific button event:

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

Passing this is not necessary. As the event can be accessed and target element can be obtained from it. In the button you may just use: onclick="mostrarValueCategoria()" and the function as below:

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

Here is the running code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>
    <script>
        function mostrarValueCategoria(e) {
            var name = e.value;
            document.querySelector('.valueCategoria').innerHTML = name;
        }
    </script>
</head>

<body>
    <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>
</body>

</html>

Upvotes: 0

R3tep
R3tep

Reputation: 12864

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.

Upvotes: 2

Swati
Swati

Reputation: 28522

You can have pass this while calling function , just use that to get value of cuurent button clicked .i.e : 

   function mostrarValueCategoria(element) {
        var name =element.value;
        document.querySelector('.valueCategoria').innerHTML = name;
    }
<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>

Upvotes: 0

Baljinder Singh
Baljinder Singh

Reputation: 1

window.mostrarValueCategoria = function (event) {
        var name = event.target.value;
        document.querySelector('.valueCategoria').innerHTML = name;
    }
<div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
                <button class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(event)">Passeio</button>
                <button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(event)">SUV/Pickup/4x4</button>
                <button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(event)">Van e Utilitário</button>
                <button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(event)">Caminhão e Carga</button>
            </div>
            
            <div class="valueCategoria">
            
            </div>

You can use 'event' object to access properties of element that caused the event.

Upvotes: 0

silentw
silentw

Reputation: 4885

function mostrarValueCategoria(button) {
  var name = button.value;
  document.querySelector('.valueCategoria').innerHTML = name;
}
<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>

Upvotes: 0

Related Questions