HTML JAVASCRIPT

24/09/2019

0

HTML JavaScript Web Forms

boa noite estou tentando fazer um html usando javascript mas não estou obtendo exito estou apertando o botão submit ele não faz nada
o exercício era colocar um preço,em seguida tem uma caixa de marcar de 1 a 3 o 1 é 10%,2=15%,3=20% é como se fosse o frete e a quantidade do produto e depois calcular tudo mas não estou conseguindo por favor me ajudem. 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#FormNota {
		color:red;
		background-color: yellow;
		font-size: 55px;
	}

* {
  box-sizing: border-box;
}

form {
  padding: 1em;
  background: #f9f9f9;
  border: 1px solid #c1c1c1;
  margin-top: 2rem;
  max-width: 350px;
  margin-left: left;
  margin-right: center;
  padding: 1em;
  float: left;
  grid-gap: 100%; 
  

}
.form2 {
  padding: 1em;
  background: #f9f9f9;
  border: 1px solid #c1c1c1;
  margin-top: 2rem;
  max-width: 350px;
  margin-left: center;
  margin-right: center;
  padding: 1em;
  float: left;
  grid-gap: 1000px;


}
.form3 {
  padding: 1em;
  background: #f9f9f9;
  border: 1px solid #c1c1c1;
  margin-top: 2rem;
  max-width: 350px;
  margin-left: right;
  margin-right: right;
  padding: 1em;
  float: left;
  grid-gap: 1000px;
 
}
form input {
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #9c9c9c;
}
form button {
  background: lightgrey;
  padding: 0.7em;
  border: 0;
}
form button:hover {
  background: gold;
}

label {
  text-align: left;
  display: block;
  padding: 0.5em 1.5em 0.5em 0;
}

input {
  width: 100%;
  padding: 0.7em;
  margin-bottom: 0.5rem;
}
input:focus {
  outline: 3px solid gold;
}

@media (min-width: 400px) {
  form {
    overflow: hidden;
  }

  label {
    float: left;
    width: 200px;
  }

  input {
    float: left;
    width: calc(100% - 200px);
  }

  button {
    float: right;
    width: calc(100% - 200px);
  }
}
</style>

<script>
	function Valor(){
		Valor = document.getElementById("Valor").value;
		Qt = document.getElementById("Qt").value;
 		Ft = document.getElementById("Ft").value;
          
 		
 		if(Qt=0 >1 && Qt<3)
 		{
 			Ft = (parseFloat(Valor)*0.15);
 		}
 		else if(Qt < 2)
 		{
 			Ft = (parseFloat(Valor)*0.1);
 		}
 		else if(Qt > 2)
 		{
 			Ft = (parseFloat(Valor)*0.20);
 		}

 		document.getElementById("Ft").innerHTML = 
 		"Total: R$" + Ft;
	}
</script>	

</head>

<body>
<!--venda1-->

<form >

  <img src="Moletom.jpg">
 	<p>Moletom ETEC</p><br><br>
  <div class="form-group">
    <label for="formGroupExampleInput">PRECO</label>
    <input type="Valor" class="form-control" id="Valor" placeholder="Example input">
  </div>

  <div class="form-row align-items-center">
    <div class="col-auto my-1">
    	<br>
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Frete</label>

      <select class="custom-select mr-sm-2" id="Ft">
        <option selected>Choose...</option>
        <option value="10%">1</option>
        <option value="15%">2</option>
        <option value="20%">3</option>
      </select>
    </div>
   
  </div>

  <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="Valor()">Submit</button>
    </div>

</form>
<div id="">
</div>

</body>
</html>
Luciano

Luciano

Responder

Post mais votado

25/09/2019

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #FormNota {
        color:red;
        background-color: yellow;
        font-size: 55px;
        }

        * {
        box-sizing: border-box;
        }

        form {
        padding: 1em;
        background: #f9f9f9;
        border: 1px solid #c1c1c1;
        margin-top: 2rem;
        max-width: 350px;
        margin-left: left;
        margin-right: center;
        padding: 1em;
        float: left;
        grid-gap: 100%;


        }
        .form2 {
        padding: 1em;
        background: #f9f9f9;
        border: 1px solid #c1c1c1;
        margin-top: 2rem;
        max-width: 350px;
        margin-left: center;
        margin-right: center;
        padding: 1em;
        float: left;
        grid-gap: 1000px;


        }
        .form3 {
        padding: 1em;
        background: #f9f9f9;
        border: 1px solid #c1c1c1;
        margin-top: 2rem;
        max-width: 350px;
        margin-left: right;
        margin-right: right;
        padding: 1em;
        float: left;
        grid-gap: 1000px;

        }
        form input {
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #9c9c9c;
        }
        form button {
        background: lightgrey;
        padding: 0.7em;
        border: 0;
        }
        form button:hover {
        background: gold;
        }

        label {
        text-align: left;
        display: block;
        padding: 0.5em 1.5em 0.5em 0;
        }

        input {
        width: 100%;
        padding: 0.7em;
        margin-bottom: 0.5rem;
        }
        input:focus {
        outline: 3px solid gold;
        }

        @media (min-width: 400px) {
        form {
        overflow: hidden;
        }

        label {
        float: left;
        width: 200px;
        }

        input {
        float: left;
        width: calc(100% - 200px);
        }

        button {
        float: right;
        width: calc(100% - 200px);
        }
        }
    </style>

 

</head>

<body>
<!--venda1-->

    <form >

        <img src="Moletom.jpg">
        <p>Moletom ETEC</p><br><br>
        <div class="form-group">
        <label for="formGroupExampleInput">PRECO</label>
        <input type="Valor" class="form-control" id="Valor" placeholder="Example input">
        </div>

        <div class="form-row align-items-center">
        <div class="col-auto my-1">
        <br>
        <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Frete</label>

        <select class="custom-select mr-sm-2" id="Ft">
        <option selected>Choose...</option>
        <option value="10%">1</option>
        <option value="15%">2</option>
        <option value="20%">3</option>
        </select>
        </div>

        </div>

        <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="button" class="btn btn-primary" onclick="valor()">Submit</button>
        </div>

    </form>

    <div id="Resultado">
    </div>


    <script>

        function valor(){

            Valor = document.getElementById("Valor").value;
            Qt = document.getElementById("Qt").value;
            Ft = document.getElementById("Ft").value;

            if(Qt=0 >1 && Qt<3)
            {
                Ft = (parseFloat(Valor)*0.15);
            }
            else if(Qt < 2)
            {
                Ft = (parseFloat(Valor)*0.1);
            }
            else if(Qt > 2)
            {
                Ft = (parseFloat(Valor)*0.20);
            }

            document.getElementById("Resultado").innerHTML =
            "Total: R$" + Ft;

        }
    </script>


</body>
</html>

Jothaz

Jothaz
Responder
Gostei + 1

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