HTML JAVASCRIPT
24/09/2019
0
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.
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
Curtir tópico
+ 0
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
Responder
Clique aqui para fazer login e interagir na Comunidade :)