Jump to content
DinhoPHP

Função não funciona

Recommended Posts

Olá!

Não consigo entender o porque a minha função cadValor() funciona e a desc() não

 

file.js

<script>

    var txtval = document.querySelector('#inputValor');
    var res  = document.querySelector('#inputCopyValor'); //ONDE QUERO ESCREVER
    var res2 = document.querySelector('#seuValor'); // VALOR INDO PARA HOLERITE
    var res3 = document.querySelector('#seuValorMult'); // VALOR QUE SERÁ DOBRADO
function cadValor(){
    
    var val  = Number(txtval.value);
    res.placeholder = val.toFixed(2);
    res2.placeholder = val.toFixed(2);
    var dobro = val * 2; // dobra o valor
    res3.placeholder = dobro.toFixed(2); // pega o valor dobrado
}

function desc(){
   var txtDobro    = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO
   var txtSacado   = document.querySelector('#seuValorDia2');
   var txtRestante = document.querySelector('#seuValorRes');
   var resDobro    = Number(txtDobro.value);
   var resSacado   = Number(txtSacado.value);
   //var resRestante = Number(txtRestante.value);
   var resRest     = resDobro;
   txtRestante.placeholder = resRest.toFixed(2);
}
</script>

file.php

<div class="container">
      <!-- PRIMEIRA LINHA -->
      <div class="d-flex justify-content-center mt-3">
    
      <div id="divHolerite" class="col-12 col-sm-8 col-md-6 col-lg-4">
         
         <div class="d-flex flex-column justify-content-center align-items-end bg-dark">
            <div class="col-12 mb-3">
               <label for="inputValor">Admin: Cadastrar Valor</label>
               <div class="input-group">
                  <div class="input-group-prepend">
                     <span class="input-group-text">R$</span>
                  </div>
                  <input id="inputValor" class="form-control" type="text" name="inputValor" onkeypress="return onlynumber();">
                  <button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button>
               </div>            
            </div>
         
         <div class="col-12">
            <button type="reset" value="clean" class="btn btn-light btn-lg text-uppercase mb-3">apagar cadastro</button>
         </div>
         
         <hr style="background-color: #777777; widht: 100%;">
      </div>
      <!-- SEGUNDA LINHA -->
      <div class="d-flex flex-column flex-nowrap align-items-start bg-dark mb-3">
         <div class="col-8 mb-3">
            <div class="input-group">
               <div class="input-group-prepend">
                  <span class="input-group-text">R$</span>
               </div>
               <input id="inputCopyValor" class="form-control" type="text" name="inputCopyValor" placeholder="" readonly>
            </div>
         </div>
         
         <div class="col-12 mb-3">
            <div class="input-group mb-3">
               <div class="input-group-prepend">
                  <span class="input-group-text">R$</span>
               </div>
               <input id="inputValorDia" class="form-control" type="text" name="inputValorDia" placeholder="0,10" readonly>
               <div class="input-group-prepend">
                  <span class="input-group-text">por dia</span>
               </div>
               <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3">sacar</button>
            </div>
            <div class="d-flex">               
               <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button>
               <div class="input-group">
                  <div class="input-group-prepend">
                     <span class="input-group-text">R$</span>
                  </div>
                  <input id="inputValorDesc" class="form-control" type="text" name="inputValorDesc">
                  </div>
               </div>
            </div>
         </div>    
         
      </div>
   </div>
   <!-- HOLERITE -->
   <!-- Modal -->
<div class="modal fade" id="modalHolerite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- HOLERITE -->

        <div class="container">
      <!-- PRIMEIRA LINHA -->
      <div id="test" class="d-flex justify-content-center mt-3">
         <div id="divHolerite" class="col-12 col-md-10 col-lg-8">
            <div class="d-flex flex-column justify-content-center align-items-end bg-dark">
               <div class="col-12 mb-3">
                  <h2 class="text-uppercase text-center text-white">holerite</h2>
                  <div class="row">
                     <div class="col-12 col-sm-6">
                        <label for="seuValor" class="text-left text-uppercase">seu valor</label>
                        <div class="input-group">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="seuValor" class="form-control" type="number" name="seuValor" placeholder="">
                        </div>
                     </div>
                     <div class="col-12 col-sm-6">
                        <label for="inputValorDia" class="text-left text-uppercase">total: 200 dias</label>
                        <div class="input-group mb-3">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="inputValorDia" class="form-control" type="number" name="inputValorDia">
                           <div class="input-group-prepend">
                              <span class="input-group-text">por dia</span>
                           </div>
                        </div>
                     </div>
                     <div class="col-12 col-sm-6">
                        <label for="seuValorMult" class="text-left text-uppercase">valor multiplicado</label>
                        <div class="input-group">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="seuValorMult" class="form-control" type="number" name="seuValorMult">
                        </div>
                     </div>
                  </div>
               </div>

               <hr style="background-color: #777777; widht: 100%;">
            </div>
            <!-- SEGUNDA LINHA -->
            <div class="d-flex flex-column justify-content-center bg-dark mb-3"
               style="padding-left: 10px; padding-right: 0px;">
               <div class="row overflow-visible">
                  <div class="col-12 col-sm-4">
                     <span class="text-white font-data">00/00/2019:</span>
                  </div>

                  <div class="col-12 col-sm-8">
                     <div class="input-group mb-3">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorDia2" class="form-control" type="number" name="seuValorDia2" placeholder="0,10" readonly>
                        <div class="input-group-prepend">
                           <span class="input-group-text">por dia</span>
                        </div>
                        <button type="submit" value="saque"
                           class="btn btn-danger text-uppercase btn-sm ml-3 mr-2" onclick="desc()">sacar</button>
                     </div>
                  </div>
               </div>
               <div class="form-row col-12" style="border: 2px white solid;">
                  <div class="col-12 col-sm-6">
                     <label for="seuValorSacado" class="text-left text-uppercase"><br></label>
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorSacado" class="form-control" type="number" name="seuValorSacado">
                     </div>
                     <label for="seuValorSacado" class="text-center text-uppercase">valor sacado</label>
                  </div>
                  <div class="col-12 col-sm-6">
                     <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 5vw;">seu valor
                        restante</label>
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorRes" class="form-control" type="number" name="seuValorRes" placeholder="" readonly>
                     </div>
                     <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 10vw;">pra
                        saque</label>
                  </div>
               </div>
            </div> <!-- Termina linha geral -->
         </div>
         <!-- FIM DO HOLERITE -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

 

Share this post


Link to post
Share on other sites

@DinhoPHP Boa tarde!

 

Eu consigo achar aonde a função cadValor() é chamada, mas eu não consigo achar aonde a função desc() é chamada.

<button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button>

 

Eu acho que você esqueceu de adicionar um evento para chama a função desc() no button.

<button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button>

Falta o onclick="desc()" no button.

Share this post


Link to post
Share on other sites
1 hora atrás, gabrielms disse:

@DinhoPHP Boa tarde!

 

Eu consigo achar aonde a função cadValor() é chamada, mas eu não consigo achar aonde a função desc() é chamada.


<button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button>

 

Eu acho que você esqueceu de adicionar um evento para chama a função desc() no button.


<button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button>

Falta o onclick="desc()" no button.

Provavelmente deve ter sido os CTRL+Z que pressionei amigo. Estava nesse button. Independente do valor dos inputs, sempre resulta em zero. Mas já agradeço.

<button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3" onclick="desc()">sacar</button>

Share this post


Link to post
Share on other sites

@DinhoPHP Você salva o valor no atributo placeholder e não no atributo value. Na sua função desc(), você tenta pegar o valor da atributo value como ela está sem o valor ele não funciona.

 

Assim ele deve funcionar

function desc(){
   var txtDobro    = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO
   var txtSacado   = document.querySelector('#seuValorDia2');
   var txtRestante = document.querySelector('#seuValorRes');
   var resDobro    = Number(txtDobro.placeholder);
   var resSacado   = Number(txtSacado.placeholder);
   //var resRestante = Number(txtRestante.value);
   var resRest     = resDobro;
   txtRestante.placeholder = resRest.toFixed(2);
}

 

OBs..: Esse seu código está muito bagunçado e tem muita coisa desnecessária, tenta melhorar ele um pouco.

Share this post


Link to post
Share on other sites

Sei que está @gabrielms kkkkk. Mas infelizmente estou iniciando no JS e não tenho dúvidas que esteja bagunçado, sem contar o cálculo que o cliente pediu. Desenvolvo mais com HTML5, CSS3, Bootstrap 4, PHP e C. Abraço! E Obrigadão!

Share this post


Link to post
Share on other sites

DinhoPHP

Só para tentar explicar o motivo pelo qual o seu CALCULO está com valor ZERADO, como o Gabriel comentou em uma resposta dele, na sua primeira FUNÇÃO você está jogando os VALORES dentro do ATRIBUTO PLACEHOLDER, o que não é um VALUE, não sei se você entendeu, ai quando você faz um querySelector você não especifica QUAL É O ATRIBUTO que deseja pegar, mas explicando que não pode ser .VALUE pois você está colocando os "VALORES" no document.querySelector('#inputCopyValor').placeholder.

 

Eu fiz uns testes aqui tentando entender primeiro a sua página que é ela que está bagunçada por causa da falta do CSS que você poderia postar e ajustando as suas funções.

 

Você pode posta o seu CSS aqui, pois gostaria de montar a página e ver o que esta de errado com a sua explicação "Regra do negócio"???

 

PARA QUE O CÓDIGO QUE EU ESTOU ENVIANDO FUNCIONA VOCÊ PRECISA TROCAR O TYPE DOS CAMPOS, DE NUMBER PARA TEXT. Após colocar o valor e clicar em ATIVAR você tem que fechar o modal no X, depois você digita um valor no campo de texto acima de "por dia" e clica em SACAR.

 

Nome do Arquivo do Script js.js

function cadValor(){
    var entrada = document.getElementById('inputValor').value;
    document.getElementById('seuValor').value = document.getElementById('inputValor').value;
    document.getElementById('inputCopyValor').value = document.getElementById('inputValor').value;
	
	entrada = entrada.replace(".","");
	entrada = entrada.replace(",",".");
	var calc_total = parseFloat(entrada) * 2;
	var numero = calc_total.toFixed(2).split('.');
    numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
    document.getElementById('seuValorMult').value = numero;
}
function desc(){
    //var txtDobro      = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO
    //var txtSacado     = document.querySelector('#seuValorDia2');
    //var txtRestante   = document.querySelector('#seuValorRes');
    //var resDobro      = document.getElementById('seuValorMult').value
    //var resSacado     = Number(txtSacado.value);
    //var resRest       = resDobro;
    var calculo = document.getElementById('inputValor').value;
	var subtrair = document.getElementById('inputValorDia').value;
	
    calculo = calculo.replace(".","");
    calculo = calculo.replace(",",".");
    subtrair = subtrair.replace(".","");
    subtrair = subtrair.replace(",",".");
    var calc_total = parseFloat(calculo) - parseFloat(subtrair);
    var numero = calc_total.toFixed(2).split('.');
    numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
    document.getElementById('inputValorDesc').value = numero;
}
<?php date_default_timezone_set('America/Sao_Paulo'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include "../pescados/reuso/head.php" ?>
<div class="container">
      <!-- PRIMEIRA LINHA -->
      <div class="d-flex justify-content-center mt-3">
      <div id="divHolerite" class="col-12 col-sm-8 col-md-6 col-lg-4">
         <div class="d-flex flex-column justify-content-center align-items-end bg-dark">
            <div class="col-12 mb-3">
               <label for="inputValor">Admin: Cadastrar Valor</label>
               <div class="input-group">
                  <div class="input-group-prepend">
                     <span class="input-group-text">R$</span>
                  </div>
                  <input id="inputValor" class="form-control" type="text" name="inputValor" onkeypress="return onlynumber();" autofocus >
                  <button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button>
               </div>            
            </div>
         <div class="col-12">
            <button type="reset" value="clean" class="btn btn-light btn-lg text-uppercase mb-3">apagar cadastro</button>
         </div>
         <hr style="background-color: #777777; widht: 100%;">
      </div>
      <!-- SEGUNDA LINHA -->
      <div class="d-flex flex-column flex-nowrap align-items-start bg-dark mb-3">
         <div class="col-8 mb-3">
            <div class="input-group">
               <div class="input-group-prepend">
                  <span class="input-group-text">R$</span>
               </div>
               <input id="inputCopyValor" class="form-control" type="text" name="inputCopyValor" placeholder="" readonly> <-- AQUI ...
            </div>
         </div>
         
         <div class="col-12 mb-3">
            <div class="input-group mb-3">
               <div class="input-group-prepend">
                  <span class="input-group-text">R$</span>
               </div>
               <input id="inputValorDia" class="form-control" type="text" name="inputValorDia" placeholder="0,10">
               <div class="input-group-prepend">
                  <span class="input-group-text">por dia</span>
               </div>
               <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3" onclick="desc()">Sacar</button> AQUI SACA.
            </div>
            <div class="d-flex">               
               <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button>
               <div class="input-group">
                  <div class="input-group-prepend">
                     <span class="input-group-text">R$</span>
                  </div>
                  <input id="inputValorDesc" class="form-control" type="text" name="inputValorDesc">
                  </div>
               </div>
            </div>
         </div>    
         
      </div>
   </div>
   <!-- HOLERITE -->
   <!-- Modal -->
<div class="modal fade" id="modalHolerite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- HOLERITE -->

        <div class="container">
      <!-- PRIMEIRA LINHA -->
      <div id="test" class="d-flex justify-content-center mt-3">
         <div id="divHolerite" class="col-12 col-md-10 col-lg-8">
            <div class="d-flex flex-column justify-content-center align-items-end bg-dark">
               <div class="col-12 mb-3">
                  <h2 class="text-uppercase text-center text-white">holerite</h2>
                  <div class="row">
                     <div class="col-12 col-sm-6">
                        <label for="seuValor" class="text-left text-uppercase">seu valor</label>
                        <div class="input-group">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="seuValor" class="form-control" type="number" name="seuValor" placeholder="">
                        </div>
                     </div>
                     <div class="col-12 col-sm-6">
                        <label for="inputValorDia" class="text-left text-uppercase">total: 200 dias</label>
                        <div class="input-group mb-3">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="inputValorDia" class="form-control" type="number" name="inputValorDia">
                           <div class="input-group-prepend">
                              <span class="input-group-text">por dia</span>
                           </div>
                        </div>
                     </div>
                     <div class="col-12 col-sm-6">
                        <label class="text-left text-uppercase">valor multiplicado</label>
                        <div class="input-group">
                           <div class="input-group-prepend">
                              <span class="input-group-text">R$</span>
                           </div>
                           <input id="seuValorMult" class="form-control" type="text" name="seuValorMult">VALOR MULTIPLICADO
                        </div>
                     </div>
                  </div>
               </div>

               <hr style="background-color: #777777; widht: 100%;">
            </div>
            <!-- SEGUNDA LINHA -->
            <div class="d-flex flex-column justify-content-center bg-dark mb-3"
               style="padding-left: 10px; padding-right: 0px;">
               <div class="row overflow-visible">
                  <div class="col-12 col-sm-4">
                     <span class="text-white font-data"><?php echo date('d/m/Y'); ?></span>
                  </div>

                  <div class="col-12 col-sm-8">
                     <div class="input-group mb-3">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorDia2" class="form-control" type="number" name="seuValorDia2" placeholder="0,10" readonly>
                        <div class="input-group-prepend">
                           <span class="input-group-text">por dia</span>
                        </div>
                        <button type="submit" value="saque"
                           class="btn btn-danger text-uppercase btn-sm ml-3 mr-2" onclick="desc()">sacar</button>
                     </div>
                  </div>
               </div>
               <div class="form-row col-12" style="border: 2px white solid;">
                  <div class="col-12 col-sm-6">
                     <label for="seuValorSacado" class="text-left text-uppercase"><br></label>
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorSacado" class="form-control" type="number" name="seuValorSacado">
                     </div>
                     <label for="seuValorSacado" class="text-center text-uppercase">valor sacado</label>
                  </div>
                  <div class="col-12 col-sm-6">
                     <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 5vw;">seu valor restante</label> AQUI VALOR RESTANTE
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">R$</span>
                        </div>
                        <input id="seuValorRes" class="form-control" type="number" name="seuValorRes" placeholder="" readonly> Restante
                     </div>
                     <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 10vw;">pra
                        saque</label>
                  </div>
               </div>
            </div> <!-- Termina linha geral -->
         </div>
         <!-- FIM DO HOLERITE -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
</div>
<script src="js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Se você colocar o código e der mais detalhe de como deve funcionar esses códigos posso te ajudar.

 

Se a minha resposta for útil não esqueça de agradecer e votar positivo.

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

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 samuel.huarachi
      Como o sistema da Yellow funciona?
      Como uma requisição no celular, destrava um patinete?

      Tem algum artigo na internet falando disso?
    • By victorhupo
      Eu tenho um código html e quero que a partir de um formulário o javascript modifique o conteúdo dele porem tenho um conhecimento raso.
       o código seria esse.
      <textarea> <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="901" data-original-width="1600" src="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" /></a></div> </textarea> eu preciso que a partir do link q o usuário colocar no formulário ele substitua esse link de imagem pelo que foi colocado na tabela. alguém tem alguma solução?
    • By geivisonsales
      Tenho um site sobre conteudos de entretenimento, e todos os posts tem uma imagem de fundo do tmdb, tem alguma maneira de otimizar o carregamento dessas imagens por url? ou alguma outra maneira?
×

Important Information

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