How to call a function in an HTML form?
Hello, I need help, I'm creating a javascript program that should receive the input data (height and width) via Form HTML and then call a function that uses this data to calculate and show the total area on the screen. But it does not return anything, and I do not know if my error is when calling the function or writing the data on the screen follows my code below:
Note: I am using two files HTML , one with the form and the other with the function. This is the code with the form.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Teste-Simulador.css">
<title>Teste Simulador de Área</title>
</head>
<body>
<h1>Teste Simulador de Área</h1>
<form name="simulador" method="post" action="Retorno-teste.html" onsubmit="simular();">
<p>Altura (em Metros): <input type="number" name="Altura" class="altura" min="0" step="0.5" placeholder="Digite a altura de sua área" /></p>
<p>Largura (em Metros): <input type="number" name="Largura" class="largura" min="0" step="0.5" placeholder="Digite a largura de sua área" /></p>
<h2>Produto</h2>
<select name="Produto">
<option value="">Selecione o Produto</option>
<option value="Tatame50">Tatame 50cm x 50cm</option>
<option value="Tatame1">Tatame 1m x 1m</option>
<option value="Piso50">Piso Crossfit/Playground 50cm x 50cm</option>
<option value="Piso1">Piso Crossfit/Playground 1m x 1m</option>
</select>
<p><label><input type="submit" name="sbt" value="Simular Área" /></label></p>
</form>
</body>
</html>And below the code with the function
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Teste-Simulador.css">
<title>Retorno Teste Simulador de Área</title>
</head>
<body>
<script>
function simular(){
let altura = document.getElementById("altura").innerHTML;
let largura = document.getElementById("largura").innerHTML;
parseFloat area = altura * largura;
document.write(area);
}
</script>
</body>
</html>1 answers
In a very simple way, unite your two HTMLs. I did not identify him, I just changed the errors that were in him. I left the result as alert for you to see how it works.
there were some errors:
* In innerHTML, the correct is to use value to get the value.
* Using only name in the inputs, your function uses ID
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Teste-Simulador.css">
<title>Teste Simulador de Área</title>
</head>
<script>
function simular(){
let altura = document.getElementById("Altura").value;
let largura = document.getElementById("Largura").value;
let area = altura * largura;
alert(area);
}
</script>
<body>
<h1>Teste Simulador de Área</h1>
<form name="simulador">
<p>Altura (em Metros): <input type="number" name="Altura" id="Altura" class="altura" min="0" step="0.5" placeholder="Digite a altura de sua área" /></p>
<p>Largura (em Metros): <input type="number" name="Largura" id="Largura" class="largura" min="0" step="0.5" placeholder="Digite a largura de sua área" /></p>
<p><input type="number" name="area"> </p>
<h2>Produto</h2>
<select name="Produto">
<option value="">Selecione o Produto</option>
<option value="Tatame50">Tatame 50cm x 50cm</option>
<option value="Tatame1">Tatame 1m x 1m</option>
<option value="Piso50">Piso Crossfit/Playground 50cm x 50cm</option>
<option value="Piso1">Piso Crossfit/Playground 1m x 1m</option>
</select>
<p><label><input type="button" name="sbt" onclick="simular()" value="Simular Área" /></label></p>
</form>
</body>
</html>