0

Olá, Preciso de Ajuda, Estou criando um programa em javascript que deve receber os dados de entrada (Altura e largura) via formulário HTML e depois chamar uma função que que utilize esses dados para calcular e mostrar na tela a área total. Porém ela não retorna nada, e não sei se meu erro esta na hora de chamar a função ou de escrever os dados na tela Segue meu Código Abaixo:

Obs: Estou utilizando dois arquivos HTML, um com o formulário e o outro com a função. Este é o código com o formulário.

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

E Abaixo o Código com a função

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

2
  • 3
    Olá, por que está utilizando dois HTML e não utilizando tudo em um somente?
    – Sumback
    Commented 18/10/2019 às 13:28
  • Porque quando eu utilizo ele simplesmente limpa os dados do formulário.de qualquer maneira não consigo obter o retorno da função, o que eu mudaria no código se utlizasse apenas um? Commented 18/10/2019 às 13:51

1 Resposta 1

1

De uma forma bem simples, uni teus dois HTMLs. Não identei ele, apenas alterei os erros que haviam nele. Deixei o resultado como alert para você ver o funcionamento.
Haviam alguns erros:
* No innerHTML, o correto é usar o value para pegar o valor.
* Usando apenas o name nos inputs, tua função usa 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>
1
  • 1
    Funcionou Certinho! Valeu Amigo. Commented 18/10/2019 às 14:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .