Функция запуска для нескольких элементов в JS

Question

У меня есть функция, которая отвечает за обновление значений в некоторых <div>, код выглядит так:

file.js

window.onload = function makeRequest() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            calcPreco(xmlHttp.responseText);
    }
    xmlHttp.open("GET", "_config/buscar_valor.php?id="+document.getElementsByName("cloud")[0].getAttribute("cloudid")+"&periodicidade=monthly", true); // true para asynchronous 
    xmlHttp.send(null);
}

function calcPreco(preco) {
    console.log(preco);
    preco = preco.replace(",", ".");
    preco -= document.getElementsByName("cloud")[0].getAttribute("desconto");
    document.getElementsByClassName("mostrar_valor").textContent = preco;
}

index.php

<div name="cloud" cloudid="1" desconto="5"> 
<span class="mostrar_valor"></span> 
</div> 
<div name="cloud" cloudid="2" desconto="10"> 
<span class="mostrar_valor"></span> 
</div> 
<div name="cloud" cloudid="3" desconto="15"> 
<span class="mostrar_valor"></span> 
</div>

Обратите внимание, что в каждом <div> изменяются только атрибуты cloudid и desconto, остаток остается тем же.

Сценарий выполняет вычисления только путем поиска значения в « buscar_valor.php » через атрибут cloudid, который является идентификатором каждого плана.

Атрибут desconto - это сумма, которую он вычтет со счета.

Проблема в том, что он делает это только для первого <div>, как я могу заставить его работать для всех <div>?

Answer 1

Вы должны перебрать все облачные элементы как:

  for(const cloud of Array.from(document.getElementsByName("cloud"))) {

Чтобы затем извлечь связанный preco из API, я бы использовал новый метод fetch, так как с ним проще работать:

   fetch("_config/buscar_valor.php?id=" + cloud.getAttribute("cloudid")+ "&periodicidade=monthly")
     .then(res => res.text())
     .then(preco => {

Теперь desconto можно применить к preco:

       preco -= cloud.getAttribute("desconto");

Чтобы получить mostrar_valor insode этого облака, просто используйте querySelector:

       const valor = cloud.querySelector(".mostrar_valor");      

тогда вы можете изменить textContent этого элемента.