0
Hello, I need help, I am creating a javascript program that should receive input data (Height and width) via form HTML and then call a function that uses this data to calculate and display the total area on the screen. However it does not return anything, and I do not know if my error is time to call the function or write the data on the screen Follow 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>
Hello, why are you using two HTML and not using everything in one?
– Sumback
Because when I use it simply wipes the form data.Anyway I can’t get the function return, what I would change in the code if I only use one?
– Alisson Almeida