onclick JAVASCRIPT 如何从相同的 class 获取每个值

Question

这是我的代码

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

和我的 js

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

我需要解决的问题：在每次点击时，获取我点击的按钮的当前值，擦除之前的值。

Answer 1

你传递 this 作为参数，你可以在你的函数中使用它来获取当前值。

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>

注意您可以使用innerText代替innerHTML来显示值。

Answer 2

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>

Answer 3

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>

您可以使用 'event' 对象来访问引起事件的元素的属性。

Answer 4

您必须从特定按钮事件中捕获值：

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

不需要传递 this。由于可以访问 event 并且可以从中获取 target 元素。在按钮中，您可以只使用：onclick="mostrarValueCategoria()" 和如下函数：

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

这里是运行代码：

<!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>

Answer 5

您可以在调用函数时传递 this，只需使用它来获取当前 button 单击的值。即：

   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>

onclick JAVASCRIPT 如何从相同的 class 获取每个值

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

javascript

innerhtml

return-value