如何在循环内使用类名更改innerHTML

Question

这里是我的代码，我只想通过获取 for 循环内部的类名来更改 btn 的 innerHTML

    {% for pbyid in productbyid %}

<div class="card card_body m-2 p-0 container" id='{{pbyid.id}}'>
<div>
  <div>
  <a href="/viewpage/{{pbyid.id}}"><div class='imagestyle' ><img class="card-img-top " src="{{pbyid.image}}"width="500" height="200" alt="Card image cap "></div></a>
  <span class="top-left">{{pbyid.discountpercentage}}% off</span>
  </div>
  <div class="card-body">
    <h5 class="card-title cardtitle">{{pbyid.title}}</h5>
    <div><p class="carddesccrip">{{pbyid.desc}} </p></div>
    <div class='pricce_card'>
    <span class='price'> <b>M.R.P</b> <strike class='carddesc'>RS {{pbyid.discountPrice}}</strike></span>
    <span class='final_price'><b>RS. {{pbyid.finalprice}}</b></span>
    
</div>
  </div>
  <div class="card-body">
  {% comment %} /viewpage/{{pbyid.id}} {% endcomment %}
     <p href="" id='' class="btn btn-lg btn-block addbtn caddtocart" onclick="myFunction({{pbyid.id}})" > Add to cart 
     <i class="fa fa-plus float-right align-center p-2 plusbtn" aria-hidden="true"></i></p> 
  </div>
  </div>



  </div>

 {% endfor %}

js 如何从 class 更改 btn 的 html，当我尝试时，它不能与 classname 一起使用，但它可以与 id 一起使用，但对于 id 是特定的，所以我们必须使用 classname 但我不完全明白如何解决任何人都可以有想法解决它

function myFunction(id) {
var x = document.getElementsByClassName("caddtocart");

x.innerHTML = "added";
console.log(id);

}
 <-- another method -->
var x = document.getElementsByClassName("caddtocart");


    x.forEach(myFunction(id))
    {
    document.getElementsByClassName("caddtocart").innerHTML = "Paragraph changed!";
    console.log(id);
    }
       

 </script>

Answer 1

试试下面的代码：

function myFunction(id) {
    var els = document.getElementsByClassName("caddtocart");

    Array.prototype.forEach.call(els, function(el) {
        elm.innerHTML = "Paragraph changed!";
        console.log(el.id);
    });
}

或者先检查id：

function myFunction(id) {
    if(id) {
        var elm = document.getElementById(id);
        elm.innerHTML = "Paragraph changed!";
    } else {
        var els = document.getElementsByClassName("caddtocart");

        Array.prototype.forEach.call(els, function(el) {
            elm.innerHTML = "Paragraph changed!";
            console.log(el.id);
        });
    }
}