Como usar a mesma função com dois botões ? HTML JAVASCRIPT
28/09/2019
0
Como usar a mesma função com dois botões ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\css\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="Valor" class="" id="Valor" placeholder="Example input">
</div>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<br>
<span>Frete</span>
<select id="myList" onchange="myfunction()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
</p>
</fieldset>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="Qt" class="form-control" id="Qt" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="submit" class="btn btn-primary" onclick="myfunction()">Submit</button>
</div>
<div>
<p id="demo"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="Valor" class="" id="Valor" placeholder="Example input">
</div>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<br>
<span>Frete</span>
<select id="myList" onchange="myfunction()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
</p>
</fieldset>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="Qt" class="form-control" id="Qt" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="submit" class="btn btn-primary" onclick="myfunction()">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function myfunction() {
Valor = document.getElementById("Valor").value;
Qt = document.getElementById("Qt").value;
Ft = document.getElementById("myList").value;
switch (Ft) {
case "1":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.10) + Qt;
break;
case "2":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.15) + Qt;
break;
case "3":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.20) + Qt;
break;
}
document.getElementById("demo").innerHTML = "Valor:" + "R$" + Ft
}
function myfunction2() {
myfunction();
document.getElementById("demo2").innerHTML = "Valor:" + "R$" + Ft
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\css\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="Valor" class="" id="Valor" placeholder="Example input">
</div>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<br>
<span>Frete</span>
<select id="myList" onchange="myfunction()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
</p>
</fieldset>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="Qt" class="form-control" id="Qt" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="submit" class="btn btn-primary" onclick="myfunction()">Submit</button>
</div>
<div>
<p id="demo"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="Valor" class="" id="Valor" placeholder="Example input">
</div>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<br>
<span>Frete</span>
<select id="myList" onchange="myfunction()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
</p>
</fieldset>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="Qt" class="form-control" id="Qt" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="submit" class="btn btn-primary" onclick="myfunction()">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function myfunction() {
Valor = document.getElementById("Valor").value;
Qt = document.getElementById("Qt").value;
Ft = document.getElementById("myList").value;
switch (Ft) {
case "1":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.10) + Qt;
break;
case "2":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.15) + Qt;
break;
case "3":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.20) + Qt;
break;
}
document.getElementById("demo").innerHTML = "Valor:" + "R$" + Ft
}
function myfunction2() {
myfunction();
document.getElementById("demo2").innerHTML = "Valor:" + "R$" + Ft
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
Luciano
Curtir tópico
+ 0
Responder
Post mais votado
30/09/2019
Algumas considerações:
Sempre que postar um código use as tags code do ícone </> a direita, assim seu código vem formatado o que facilitar a leitura e consequentemente a ajuda.
Código desorganizado normalmente as pessoas nem leem, pois realmente complica a ajuda. Em um entrevista de emprego seu código diz muito de você e código desorganizado vai pesar contra.
Lembrar-se de que vai haver manutenção do seu código e nem sempre vai ser executadas por você, então quanto mais legível for seu código menso vão xingar você e seu descendência.
Seu código tem várias tag´s HTML abertas que não são fechadas e fechadas além de complicar a leitura de seu código dependendo da tecnologia que vocês for utilizar isto irá resultar em erro.
Rodar offline direto no browser sempre vai funcionar, mas quando você partir para integração com outras tecnologias e for utilizar estes erros podem fazer com que sua aplicação nem rode.
Outra observação você esta utilizando alguns atributos type´s no seus inputs que não existem:
Não existe semanticamente os tipos Qt e Valor rodando direto no browser pode não causar erro, mas além de poluir o código dependendo do contexto pode originar erros.
Veja mais sobre o atributo type:
Você esta utilizando submit em todos os seus buttons o que semanticamente não é correto:.
Use submit somente quando existir um formulário e for executado um post ou get.
Veja mais sobre o controle button
Outra recomendação é criar nome de functions semanticamente corretas, além de ser um boa prática ajuda na leitura.
Ao invés de myfunction e myfunction2, use alguma mais descritivo: calculaValreos e atualziaControles. Claro que é somente uma sugestão e vai do gosto de cada um, mas imagina em um página com 5 mil linha fica muito mais fácil dar manutenção com nomes de funções o mais claros possível.
Vi que você esta usando o mesmo Id para mais de um controle, o que não é considerado um a boa prática e dificulta a manipulação, ainda mais para principiantes. Id pode definição é um identificador único então o mais correto semanticamente é se for utilizar Id o mesmo deve ser única para cada controle. Mais sobre o assunto: .
Tudo o que foi exposto acima não é dogma nem a verdade absoluta são somente minhas considerações e minha visão pessoal baseada em minha experiência e vivência, e certamente outras pessoas poderão discordar.
E claro sei que você esta aprendendo, mas quanto mais você acostumar-se as boas práticas melhor, você só tem a ganhar!
Fiz algumas alterações em seu código, para funcionar não é a melhor abordagem, mas dentro do que você projetou ficaria assim:
[code=js]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\\css\\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p>
<br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor1" placeholder="Example input">
</div>
<!--
Estas Div´s estão sendo abertar e não estão sendo fechadas
Feche as tag´s corretamente ou não use
<div class="form-row align-items-center">
<div class="col-auto my-1"> -->
<br>
<span>Frete</span>
<select id="valor_frete1" onchange="atualizaControle()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
<!--
Estas P e Fieldset estão sendo fechadas e não estão sendo abertas
Abra as tag´s corretamente ou não use
</p>
</fieldset>
-->
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt1" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('1')">Submit</button>
</div>
<div>
<p id="demo1"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor2" placeholder="Example input">
</div>
<!--
Estas Div´s estão sendo abertar e não estão sendo fechadas
Feche as tag´s corretamente ou não use
<div class="form-row align-items-center">
<div class="col-auto my-1">
-->
<br>
<span>Frete</span>
<select id="valor_frete2" onchange="atualizaControle()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
<!--
Estas P e Fieldset estão sendo fechadas e não estão sendo abertas
Abra as tag´s corretamente ou não use
</p>
</fieldset>
-->
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt2" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('2')">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function calculaValores(num) {
Valor = document.getElementById("valor" + num).value;
Qt = document.getElementById("qt" + num ).value;
Ft = document.getElementById("valor_frete" + num).value;
switch (Ft) {
case "1":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.10) + Qt;
break;
c
Sempre que postar um código use as tags code do ícone </> a direita, assim seu código vem formatado o que facilitar a leitura e consequentemente a ajuda.
Código desorganizado normalmente as pessoas nem leem, pois realmente complica a ajuda. Em um entrevista de emprego seu código diz muito de você e código desorganizado vai pesar contra.
Lembrar-se de que vai haver manutenção do seu código e nem sempre vai ser executadas por você, então quanto mais legível for seu código menso vão xingar você e seu descendência.
Seu código tem várias tag´s HTML abertas que não são fechadas e fechadas além de complicar a leitura de seu código dependendo da tecnologia que vocês for utilizar isto irá resultar em erro.
Rodar offline direto no browser sempre vai funcionar, mas quando você partir para integração com outras tecnologias e for utilizar estes erros podem fazer com que sua aplicação nem rode.
Outra observação você esta utilizando alguns atributos type´s no seus inputs que não existem:
<input type="Qt" class="form-control" id="Qt" placeholder="Another input"> <input type="Valor" class="" id="Valor" placeholder="Example input">
Não existe semanticamente os tipos Qt e Valor rodando direto no browser pode não causar erro, mas além de poluir o código dependendo do contexto pode originar erros.
Veja mais sobre o atributo type:
https://www.w3schools.com/html/html_form_input_types.asp
Você esta utilizando submit em todos os seus buttons o que semanticamente não é correto:
<button type="submit" class="btn btn-primary" onclick="myfunction()">Submit</button>
Use submit somente quando existir um formulário e for executado um post ou get.
Veja mais sobre o controle button
https://www.w3schools.com/tags/tag_button.asp
Outra recomendação é criar nome de functions semanticamente corretas, além de ser um boa prática ajuda na leitura.
Ao invés de myfunction e myfunction2, use alguma mais descritivo: calculaValreos e atualziaControles. Claro que é somente uma sugestão e vai do gosto de cada um, mas imagina em um página com 5 mil linha fica muito mais fácil dar manutenção com nomes de funções o mais claros possível.
Vi que você esta usando o mesmo Id para mais de um controle, o que não é considerado um a boa prática e dificulta a manipulação, ainda mais para principiantes. Id pode definição é um identificador único então o mais correto semanticamente é se for utilizar Id o mesmo deve ser única para cada controle. Mais sobre o assunto:
https://pt.stackoverflow.com/questions/318255/por-que-%C3%A9-considerado-errado-ruim-repetir-uma-id-em-html
Tudo o que foi exposto acima não é dogma nem a verdade absoluta são somente minhas considerações e minha visão pessoal baseada em minha experiência e vivência, e certamente outras pessoas poderão discordar.
E claro sei que você esta aprendendo, mas quanto mais você acostumar-se as boas práticas melhor, você só tem a ganhar!
Fiz algumas alterações em seu código, para funcionar não é a melhor abordagem, mas dentro do que você projetou ficaria assim:
[code=js]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\\css\\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p>
<br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor1" placeholder="Example input">
</div>
<!--
Estas Div´s estão sendo abertar e não estão sendo fechadas
Feche as tag´s corretamente ou não use
<div class="form-row align-items-center">
<div class="col-auto my-1"> -->
<br>
<span>Frete</span>
<select id="valor_frete1" onchange="atualizaControle()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
<!--
Estas P e Fieldset estão sendo fechadas e não estão sendo abertas
Abra as tag´s corretamente ou não use
</p>
</fieldset>
-->
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt1" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('1')">Submit</button>
</div>
<div>
<p id="demo1"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor2" placeholder="Example input">
</div>
<!--
Estas Div´s estão sendo abertar e não estão sendo fechadas
Feche as tag´s corretamente ou não use
<div class="form-row align-items-center">
<div class="col-auto my-1">
-->
<br>
<span>Frete</span>
<select id="valor_frete2" onchange="atualizaControle()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
<!--
Estas P e Fieldset estão sendo fechadas e não estão sendo abertas
Abra as tag´s corretamente ou não use
</p>
</fieldset>
-->
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt2" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('2')">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function calculaValores(num) {
Valor = document.getElementById("valor" + num).value;
Qt = document.getElementById("qt" + num ).value;
Ft = document.getElementById("valor_frete" + num).value;
switch (Ft) {
case "1":
Qt = Valor * Qt;
Ft = (parseFloat(Qt)*0.10) + Qt;
break;
c
Jothaz
Responder
Mais Posts
30/09/2019
Luciano
O exercício que fiz deu 293 linhas com uma function deu 190 linhas,vc é incrível cara,Muito Obrigado mesmo.
Uma ótima noite e mais uma vez Obrigado!!
Uma ótima noite e mais uma vez Obrigado!!
Responder
01/10/2019
Jothaz
De nada!
Contudo mais que funcionar o importante é seguir as boas práticas de codificação.
Ainda da para ficar menor:
Contudo mais que funcionar o importante é seguir as boas práticas de codificação.
Ainda da para ficar menor:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\\css\\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p>
<br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor1" placeholder="Example input">
</div>
<br>
<span>Frete</span>
<select id="valor_frete1" onchange="atualizaControle()">
<option value="0.10">10%</option>
<option value="0.15">15%</option>
<option value="0.20">20%</option>
</select>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt1" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('1')">Submit</button>
</div>
<div>
<p id="demo1"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor2" placeholder="Example input">
</div>
<br>
<span>Frete</span>
<select id="valor_frete2" onchange="atualizaControle()">
<option value="1">10%</option>
<option value="2">15%</option>
<option value="3">20%</option>
</select>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt2" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('2')">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function calculaValores(num) {
Valor = document.getElementById("valor" + num).value;
Qt = document.getElementById("qt" + num ).value;
Ft = document.getElementById("valor_frete" + num).value;
return (parseFloat(Qt)* parseFloat(Ft)) + (Valor * Qt);
}
function atualizaControle(num) {
document.getElementById("demo" + num ).innerHTML = "Valor:" + "R$" + calculaValores(num)
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
Responder
01/10/2019
Jothaz
Código correto o acima esta incompleto:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist\\css\\bootstrap.css">
</head>
<body>
<img src="Moletom.jpg">
<p>Moletom ETEC</p>
<br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor1" placeholder="Example input">
</div>
<br>
<span>Frete</span>
<select id="valor_frete1" onchange="atualizaControle()">
<option value="0.10">10%</option>
<option value="0.15">15%</option>
<option value="0.20">20%</option>
</select>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt1" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('1')">Submit</button>
</div>
<div>
<p id="demo1"></p>
</div>
<img src="Moletom.jpg">
<p>Moletom ETEC</p><br><br>
<div class="form-group">
<label for="formGroupExampleInput">PRECO</label>
<input type="text" class="" id="valor2" placeholder="Example input">
</div>
<br>
<span>Frete</span>
<select id="valor_frete2" onchange="atualizaControle()">
<option value="0.10">10%</option>
<option value="0.15">15%</option>
<option value="0.20">20%</option>
</select>
<div class="form-group">
<br>
<label for="formGroupExampleInput2">QUANTIDADE</label>
<input type="text" class="form-control" id="qt2" placeholder="Another input">
</div>
<div class="col-auto my-1">
<br>
<button type="button" class="btn btn-primary" onclick="atualizaControle('2')">Submit</button>
</div>
<div>
<p id="demo2"></p>
</div>
<script>
function calculaValores(num) {
Valor = document.getElementById("valor" + num).value;
Qt = document.getElementById("qt" + num ).value;
Ft = document.getElementById("valor_frete" + num).value;
return (parseFloat(Qt)* parseFloat(Ft)) + (Valor * Qt);
}
function atualizaControle(num) {
document.getElementById("demo" + num ).innerHTML = "Valor:" + "R$" + calculaValores(num)
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
Responder
01/10/2019
Luciano
nossa,77 linhas de programação e o meu deu 293 linhas,bem obrigado mais uma vez , no próximo exercício já vou tentar simplificar mais ainda minha programação.
Fique com Deus,uma otima noite!
Fique com Deus,uma otima noite!
Responder
Clique aqui para fazer login e interagir na Comunidade :)