Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thyago Barbosa

Adaptação pra usar meu javascript sem jquery/.js

Por , em Javascript

Recommended Posts

Thyago Barbosa    0

Thyago Barbosa
Postado

Gente, tenho o seguinte script que está fazendo cálculos, só que ele só funciona com o <script scr> do jquery 3.2.1 e eu quero tirar ele (porque onde pretendo usar não funciona nenhum arquivo .js online e também não quero ter que baixar o .js e instalar ele no arquivo)

Daí o que eu queria saber é, quais alterações eu preciso fazer pra que esse script funcione sem esse .js :/ se alguém souber como faço isso, por favor use o meu como exemplo pra fazer as alterações 

<select class="qtd-parc" type="text" name="qtd-parc" />
    <option value="1" selected>1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
			<option value="32">32</option>
			<option value="33">33</option>
			<option value="34">34</option>
			<option value="35">35</option>
			<option value="36">36</option>
			<option value="37">37</option>
			<option value="38">38</option>
			<option value="39">39</option>
			<option value="40">40</option>
			<option value="41">41</option>
			<option value="42">42</option>
			<option value="43">43</option>
			<option value="44">44</option>
			<option value="45">45</option>
			<option value="46">46</option>
			<option value="47">47</option>
			<option value="48">48</option>
			<option value="49">49</option>
			<option value="50">50</option>
<input class="valr-parc" type="text" name="valr-parc" placeholder="0,00" />
<input class="total-parc" type="text" name="total-parc" readonly />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  
$(document).ready(function(){
	var qtd_parc   = $(".qtd-parc");
    var valr_parc  = $(".valr-parc");
    var total_parc = $(".total-parc");
    var dif  = $(".diferenca");
    var avista     = $(".avista"); 
    var zerar = $(".zerar");
    
	valr_parc.on("keyup", function(){
    	$(this).val($(this).val().replace(/\D/g,'').replace(/[0-9]{12}/, "").replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1")); 
		var nw_valr_parc = valr_parc.val().replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.val() * nw_valr_parc.replace(",", ".");
			total_parc.val(multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"));
	
    });
    
	qtd_parc.on("change", function(){
    	$(this).val($(this).val().replace(/[^\d]/g, '')); 
		var nw_valr_parc = valr_parc.val().replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.val() * nw_valr_parc.replace(",", ".");
			total_parc.val(multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"));
    });
});
</script>

Script funcionando: https://jsfiddle.net/gtvzzvy5/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Billy    11

Billy
Postado

Campeão, tem coisas a melhorar no seu código, mas focando apenas em traduzir... 

 

segue...

  

(function(view) {
		var qtd_parc   = document.getElementsByClassName("qtd-parc")[0];
    var valr_parc  = document.getElementsByClassName('valr-parc')[0];
    var total_parc = document.getElementsByClassName('total-parc')[0];
    
	valr_parc.onkeyup =  function(){
    	this.value = this.value.replace(/\D/g,'').replace(/[0-9]{12}/, "").replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"); 
		var nw_valr_parc = valr_parc.value.replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.value * nw_valr_parc.replace(",", ".");
	
  
  total_parc.value = multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1");
	
    }
    
	qtd_parc.onchange =  function(){
    	this.value = this.value.replace(/[^\d]/g, ''); 
		var nw_valr_parc = valr_parc.value.replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.value * nw_valr_parc.replace(",", ".");
			total_parc.value = multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1");
    };
    
})(this);

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Billy    11

Billy
Postado

Dicas... 

 

* qtd-parc, e todos os outros names de inputs... poderiam ser id também, ao invés de classes...

* você pode fazer uma função para colocar a mascara nos campos, e uma outra para remover do campo na hora dos calculos, assim você não fica repedindo aqueles replaces... etc...

* simplificar as operações... (retirando a sujeira dos replace etc...) vai ficar mais legível escrever as operações.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Barbosa    0

Thyago Barbosa
Postado
Em 22/10/2017 at 14:08, Billy disse:

Campeão, tem coisas a melhorar no seu código, mas focando apenas em traduzir... 

 

segue...

  


(function(view) {
		var qtd_parc   = document.getElementsByClassName("qtd-parc")[0];
    var valr_parc  = document.getElementsByClassName('valr-parc')[0];
    var total_parc = document.getElementsByClassName('total-parc')[0];
    
	valr_parc.onkeyup =  function(){
    	this.value = this.value.replace(/\D/g,'').replace(/[0-9]{12}/, "").replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"); 
		var nw_valr_parc = valr_parc.value.replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.value * nw_valr_parc.replace(",", ".");
	
  
  total_parc.value = multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1");
	
    }
    
	qtd_parc.onchange =  function(){
    	this.value = this.value.replace(/[^\d]/g, ''); 
		var nw_valr_parc = valr_parc.value.replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.value * nw_valr_parc.replace(",", ".");
			total_parc.value = multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1");
    };
    
})(this);

 

Opa, ficou show man, curti. Vlws

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Barbosa    0

Thyago Barbosa
Postado
Em 22/10/2017 at 14:11, Billy disse:

Dicas... 

 

* qtd-parc, e todos os outros names de inputs... poderiam ser id também, ao invés de classes...

* você pode fazer uma função para colocar a mascara nos campos, e uma outra para remover do campo na hora dos calculos, assim você não fica repedindo aqueles replaces... etc...

* simplificar as operações... (retirando a sujeira dos replace etc...) vai ficar mais legível escrever as operações.

 

* Sobre ser ID eu sei, alias eu nem sabia que tinha getElement em Classes, eu tinha pedido essa adaptação já esperando que a galera mandasse o script com getElementByID
* Então é que sou meio leigo com html, a principio eu tinha deixado essa mascara como função, só que daí eu não consegui aplicar ela na saída do "total-parc", tipo, estava funcionando as operações e tudo, só que estava vindo o resultado assim > 9999999,00 ; mas vou tentar usar aqui.

E man, já aproveitando que você tá aqui, você sabe me dizer o que eu preciso incluir nos replaces (ou usando a função) para que os números completem casas decimais? Por exemplo, se eu digitar apenas o número "5" ele aparecer (5,00); caso seja "55" (5,50) e no resto fica do jeito que está.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito