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

[Thyago Barbosa 0]

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/

[Billy 11]

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

 

[Billy 11]

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.

 

[Thyago Barbosa 0]

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

[Thyago Barbosa 0]

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á.