Eu tenho uma função que é responsável por atualizar os valores em algumas <div>
, segue script:
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>
Note que somente os atributos cloudid
edesconto
são alterados em cada <div>
, o resto permanece o mesmo.
O script só fará um cálculo procurando o valor em "** buscar_valor.php **", através do atributo cloudid
, que é o ID de cada plano.
O atributo desconto
é o valor que ele subtrairá na conta.
O problema é que ele está fazendo isso apenas para o primeiro <div>
, como posso fazê-lo funcionar para todas as <div>
?
UPDATE:
window.onload = function calcPreco() {
for(const cloud of Array.from(document.getElementsByName("cloud"))) {
fetch("_config/buscar_valor.php?id="+cloud.getAttribute("cloudid")+"&periodicidade=monthly")
.then(res => res.text())
.then(preco => {
preco -= cloud.getAttribute("desconto");
const valor = cloud.querySelector(".mostrar_valor");
})
}
}