Jump to content
daviassumpcao

Inserir registros em várias Div's (for) getelementsbyclassname e js

Recommended Posts

Pessoal... Estou pegando 2 valores via class em divs e fazendo um cálculo para saber a porcentagem de desconto obtida (uma lista de registros). Porém, quando vou inserir o resultado em outras div's com class também, não funciona. Se eu mudo para id, é inserido na primeira div apenas. O identificador dessa div é a "desconto" que está com o fundo vermelho. É errado usar o getElementsByClassName para inserir os valores encontrados? Até tentei um for mas não rolou.... (sou iniciante em JS e isso é exercício estou fazendo) O script:

 

<div class="container">
  <div class="prateleira-wrap">
    <div class="prateleira-preco-de">De R$ 10,00</div>
    <div class="prateleira-preco-por">Por R$ 5,00</div>
    <div class="desconto"></div>
  </div>

  <div class="prateleira-wrap">
    <div class="prateleira-preco-de">De R$ 9,00</div>
    <div class="prateleira-preco-por">Por R$ 3,00</div>
    <div class="desconto"></div>
  </div>
</div>
.container{
  background-color:#e4e4e4;
  width:100%;
  height:auto;
  float:left;
}
.prateleira-wrap{
  border: 1px solid #000; 
  width:40%; 
  float:left;
  margin:10px;
}
.desconto{
  background-color:red;
  color:#fff;
  width:100%;
  height:20px;
  float:left;
}
function getMoney(str) {
             return str
                 .replace(/[^\d,]+/g, '') // Remove caracteres desnecessários.
                 .replace(',', '.');      // Troca o separador decimal (`,` -> `.`)
             }
             var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML;
             var b = getMoney(a);
             var c = document.getElementsByClassName("prateleira-preco-por")[0].innerHTML;
             if ( c !== null) {
                 var d = getMoney(c);
                 var e = ((d / b) * 100) - 100;
                 var f = e.toFixed(2);
                 document.getElementsByClassName("desconto").innerHTML = ('Desconto de ' + f + '%');
                // console.log('Desconto de ' + f + '%');
             } else {
                 console.log("Não há desconto no preço do produto");
             }

 

 

 

Share this post


Link to post
Share on other sites
2 horas atrás, daviassumpcao disse:

É errado usar o getElementsByClassName para inserir os valores encontrados?

Não pois isso apenas traz um array com todos elementos cujo possuam o classificador referente.

 

Mas vamos entender uma coisa antes:

Você busca por

2 horas atrás, daviassumpcao disse:

var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML;

Lhe trará a estrutura HTML contida nesse primeiro item encontrado, mas enquanto a algum segundo ou terceiro elemento?

Assim como você mesmo colocou você possui 2 prateleira-preco-de.

Então o mais sensato seria buscar o elemento pai e através dele chegar até os filhos.

 

var _prateleira = document.getElementsByClassName('prateleira-wrap'), // Elemento pai
    _precoDe,
    _precoPor,
    _desconto,
    _precoDesconto;

for (var _i = 0; _i < _prateleira.length; _i++) {
    _precoDe = _prateleira[_i].children[0]; // prateleira-preco-de
    _precoPor = _prateleira[_i].children[1]; // prateleira-preco-por
    _desconto = _prateleira[_i].children[2]; // desconto

    _precoDesconto = calcularPreco(_precoDe.innerText, _precoPor.innerText);

    if (isNaN(_precoDesconto) == true) {
        _desconto.innerText = 'Não há desconto no preço do produto';
    } else {
        _desconto.innerText = 'Desconto de ' + _precoDesconto + '%';
    }
}

function calcularPreco(a, b) {
    var floatA = parseFloat(extrairPreco(a)),
        floatB = parseFloat(extrairPreco(b));
    return (((floatB / floatA) * 100) - 100).toFixed(2);
}

function extrairPreco(elemento) {
    return elemento.replace(/[^\d,]+/g, '').replace(',', '.');
}

 

Share this post


Link to post
Share on other sites

@Omar~ Clara e objetiva sua resposta. Muito obrigado.... chegar aos filhos através do pai de fato (childrens) eu novo pra mim e show de bola, estou até buscando mais informações sobre isso. Deixa eu entender mais uma coisa nesse ponto da função.... (a e b) já vem na ordem que foi especificado lá em cima? _prateleira[_i].children[0]; e _prateleira[_i].children[1]; 

function calcularPreco(a, b) {
    var floatA = parseFloat(extrairPreco(a)),
        floatB = parseFloat(extrairPreco(b));
    return (((floatB / floatA) * 100) - 100).toFixed(2);
}

Muito obrigado novamente! 

Share this post


Link to post
Share on other sites

children nada mais é que um array com o(s) filho(s) de algum elemento, então pegamos o texto contido nesse filho e enviamos para a função.

 

Então obtemos o primeiro e o segundo filho

12 horas atrás, Omar~ disse:

_precoDe = _prateleira[_i].children[0]; // prateleira-preco-de

_precoPor = _prateleira[_i].children[1]; // prateleira-preco-por

 

Definimos que o valor da variável será o retorno da função clacularPreco enviando o texto contido no filho[0] e no filho[1] 

12 horas atrás, Omar~ disse:

_precoDesconto = calcularPreco(_precoDe.innerText, _precoPor.innerText);

 

em calcularPreco a será o texto contido no filho[0] e b será o texto do filho[1]

 

 

Share this post


Link to post
Share on other sites
2 horas atrás, Omar~ disse:

children nada mais é que um array com o(s) filho(s) de algum elemento, então pegamos o texto contido nesse filho e enviamos para a função.

 

Então obtemos o primeiro e o segundo filho

 

Definimos que o valor da variável será o retorno da função clacularPreco enviando o texto contido no filho[0] e no filho[1] 

 

em calcularPreco a será o texto contido no filho[0] e b será o texto do filho[1]

 

 

 

Show de bola demais! Muito obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ernestovm
      Bom dia.
      Descobri, depois de muito trabalho, um problema esquisito. Tenho duas imagens que chamam funções JavaScript determinadas. Uma funciona e a outra não. Isso no Firefox. No Chrome as duas funcionam perfeitamente. Alguém conhece alguma gambiarra para fazer o Firefox funcionar? Segue os códigos:
      HTML:
      <img src="images/ic_abrir.png" width="70" height="70" onClick="abre_notificacao(<? echo "'".$us_codigo."','".$item."'"; ?>);" style="cursor:pointer" id="p_imagem-<? echo $item; ?>" name="p_imagem-<? echo $item; ?>">
       <img src="images/ic_excluir.png" width="70" height="70" onClick="excluir_notificacao(<? echo "'".$us_codigo."'"; ?>);" style="cursor:pointer">
      JAVASCRIPT:
      <script type="text/javascript">
          function abre_notificacao(codigo,indice) {
              $("#p_imagem-"+indice).attr("src","images/ic_abrir_ok.png");
              $("#ver-"+indice).css("display", "block");
          }
          function excluir_notificacao(codigo) {
              $.post("excluir_notificacao.php", {codigo: codigo}, function(resposta) {
                  confirm(resposta+" ("+codigo+")");
              });
              location.reload();
          }

      </script>
      A Função abre_notificacao(codigo,indice)  funciona perfeitamente nos dois browsers.
      A Função excluir_notificacao(codigo) só funciona no Chrome.
      Obrigado pela luz
    • By _marlon307
      Boa noite. Bom Dia.
      Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
       
      import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg';   const Search = () => {       const menu = [         {             nctg: 'Masculino',             ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],         },         {             nctg: 'Femenino',             ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],         },         {             nctg: 'Criança',             ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],         },         {             nctg: 'Acessórios',             ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],         },         {             nctg: 'Promoção',             ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],         }       ];      const [expand, setExpand] = useState(false);       function MouseOver(event){         event.preventDefault();                  console.log(event);           if(expand) setExpand(!expand);         else setExpand(!expand);     }       return (           <nav className={styles.search}>               <div className={styles.ct}>                 <Link to="/" className={styles.index}>                     <Respponse aria-label="Respponse"/>                 </Link>               </div>               <div className={styles.ct}>                   <ul className={styles.ldep}>                       {menu.map((m) =>                                                  <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>                               <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>                                                          <SubMenuCtg gl={m.ctg} exp={expand} />                                                    </li>                     )}                                      </ul>             </div>         </nav>     ) }   export default Search
    • By Fluk
      Bom dia Galera, 
      Sou novo por aqui, estou estudando um pouco sobre o Google Script e Java Script. 

      Estou tentando criar um programinha que lê e exibe em tela os dados que estão armazenados em minha Base (FibreBase). 
      Mas quando tento puxar através da API Google google.script.run.minhaFunção() e salvar em uma variável o JavaScript passa direto não aguardando o fim da leitura de arquivo. 
      Dei uma lida sobre ser assíncrona a requisição que estou fazendo, mazers tentei de varias forma fa aguardar mas não consegui. 

       
      document.getElementById('ConsultarClientes').addEventListener( 'click',   function (){     // Buscar dados  FireBase Lista de Clientes     const clientes = getFireBase('Clientes/Arquivos');     clientes.then(retorno => console.log(retorno));   } ,false);   async function getFireBase(chave){   return google.script.run.withSuccessHandler().getFireBase(chave); };   Console log retorno
       
    • By SingleSistemas
      Olá, estou escrevendo um código aonde preciso colocar o JSON dentro de uma array, porém, o JSON foi parciado utilizando o JSON.parse, para atribuir o conteudo do document.todosOsFretes, segue o exemplo:  
      Queria saber qual alternativa que pode ser feita para mim poder colocar o document.todosOsFretes dentro de uma array e pesquisar nele, algum campo...
      Desde já agradeço.
       
       
       
       

    • By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.