0

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");  
     })
    }
}

1 Resposta 1

0

O problema é que você apenas está a aceder á primeira div com o atributo cloud document.getElementsByName("cloud")[0]

Em document.getElementsByName("cloud") você tem uma lista de todas as divs, de modo que irá necessitar de um loop para percorrer essa lista.

Exemplo:

// aqui guarda todas as divs com o atributo cloud    
var cloud_divs = document.getElementsByName("cloud"); 

// agora vamos aceder uma a uma através do ciclo for
for(let i; i < cloud_divs.length; i++){

valor = cloud_divs[i].getAtribute("desconto");
}

// uma versão mais simplificada
for( el of document.getElementsByName("cloud")){
    valor = el.getAtribute("desconto");
} 
7
  • @IazyFox...Obrigado pela resposta, foi um amigo meu que montou esse script, eu não tenho muito conhecimento na área ainda. Você pode me mostrar como ficaria essa implementação no código completo?
    – Clebson
    Commented 28/08/2018 às 14:25
  • Qual é a parte do código que está com dificuldades?
    – lazyFox
    Commented 28/08/2018 às 14:30
  • Eu não sei implementar esses loop na função, não sei como deveria ficar o script.
    – Clebson
    Commented 28/08/2018 às 14:41
  • A minha resposta esclarece a sua dúvida. Não quero ser malcriado mas acho que você deveria estudar um pouco mais javascript e familiarizar-se com alguns conceitos e mecânicas do mesmo. Se eu chapar aqui o código você não irá aprender nada. De qualquer modo, aqui vão algumas luzes: Selecionar elementos de uma página - Ciclo for
    – lazyFox
    Commented 28/08/2018 às 17:02
  • @IazyFox...Realmente pesquisando consegui fazer algo. Eu consegui fazer ele funcionar de outra forma, parecida com a usa, com base em algumas pesquisas, só não consegui fazer ele imprimir o resultado no <span>, você pode ver o que fiz de errado? Eu atualizei a pergunta.
    – Clebson
    Commented 28/08/2018 às 18:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .