Como usar a mesma função com dois botões ? HTML JAVASCRIPT

28/09/2019

0

HTML JavaScript

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>
Luciano

Luciano

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:
<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

Jothaz
Responder
Gostei + 1

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!!
Responder
Gostei + 0

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:

<!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
Gostei + 1

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
Gostei + 1

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!
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar