单击按钮时使用属性更改 div HTML 内容

Question

我在按钮上有一些数据属性，当单击这些按钮时，我需要将它们作为内容发送到 div。到目前为止我的代码的一部分是这样的：

function getDiscount() {

  var buttons = document.querySelectorAll(".form-button");

  buttons.forEach(function(item, index) {
    item.addEventListener('click', function() {
      var discount = getDiscount(this);
    });
  });

  function getDiscount(clicked_element) {
    var val = clicked_element.getAttribute("data-discount");
    return val;
  }
};

<div class="discount__Topics">
<div><strong class="discount-amount">50</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="50">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div><strong class="discount-amount">60</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="44">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

我只是不知道如何在单击时更改具有属性的 html 以及如何在同一页面上拥有两组或更多按钮。

希望有人能帮忙。非常感谢

更新：现在代码运行正常，但我在使用多个按钮工作时遇到了多个 div 的问题。我已经创建了一个 for.Each wic 正确记录我的 div，但我无法正常工作。

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {
    console.log(index)

    var buttons = document.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = document.querySelector('.discount-amount')
            span.innerHTML = '<strong>' + discount+ '</strong>'
        });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

<div class="discount__Topics">
<div><strong class="discount-amount">38</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="50">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div><strong class="discount-amount">12</strong>%</div>

<div class="offers"> 
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="44">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

Answer 1

您已经定义了两个名为 的函数getDiscount，最好让它们具有不同的名称

function init(){

    var buttons = document.querySelectorAll(".form-button");

        buttons.forEach(function (item, index) {
            item.addEventListener('click', function(){    
                var discount = getDiscount(this);
                let span = document.querySelector('.discount-amount')
                span.innerHTML = '<strong>' + discount+ '</strong>%'
                //span.innerHTML =discount.bold()+ '%' // we can use bold() instead
            });
        });

        function getDiscount(clicked_element) {
            var val = clicked_element.getAttribute("data-discount");  
            return val;
        }
};

init()

<div><span class="discount-amount"><strong>55</strong>%</div>

<div class="offers"> 

<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>

更新：对于您更新的问题，由于它有多个按钮组和 div，所以我们需要正确地将它们分开。

一种解决方案是使用索引，更改

let span = document.querySelector('.discount-amount')

到

let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]

在我看来，最好的方法是让它们有不同的id或class，这样我们就可以轻松查询它们。

let span = document.querySelector('.discount-amount')

let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]