Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">×</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>>
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>Mas viu @gabrielms, mesmo com ele no onclick, resulta em zero.
@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.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!
Não é possível reagir a postagem? Tem tempo que no meu vem dando erro neste fórum.
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'); ?><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">×</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***Obrigado! @Felipe Guedes Coutinho mas eu tinha tentado votar no @gabrielmsque me deu uma luz e não consegui. Deu erro aqui. No momento estou precisando de um ASC dinâmico no SELECT. Um botão que precise trocar essas funções. Tentei fazer com um post na mesma página ou refresh alterando apenas esta variável, mas não consegui. O interessante é que quando se pressiona F5, os dados se mantém.
@DinhoPHP Boa tarde!
Eu consigo achar aonde a função cadValor() é chamada, mas eu não consigo achar aonde a função desc() é chamada.