Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Valor do Input no Button

por Julio Moreno Possebon
| 55.5k xp | 108 posts

Boa noite! Tudo bem?? Espero que sim!

Estou com uma dificuldade de usar os valores de dois input com um só botão. O que quero fazer é um mini programa que tem duas caixas de texto, com o input, e um botão, com button, para executar uma operação com os valores dos inputs.

O código que fiz até agora é esse:

 <div class="Cálculo">
            <form action="">
                <input type="text" name="base" id="base" placeholder="Base">
                <input type="text" name="altura" id="altura" placeholder="Altura">
                <button>Calcular</button>

            </form>

            <script>


                var base = document.querySelector("#base");
                var altura = document.querySelector("#altura");
                function calcula (e) {
                    alert("A área do triângulo é:" + 1*((base.value*altura.value)/2)
                };

                var button = document.querySelector("button");
                button.onclick = calcula; 


            </script>

        </div>

Mas ao executar o programa, colocar os dois valores e clicar no botão, o que aparece é: "A área do triângulo é:[object HTMLInputElement]"...

Como posso resolver esse problema??

Agradeço desde já! Abraços!

2 respostas
solução!
por GABRIEL GIMENEZ MOREIRA
| 57.5k xp | 7 posts

Ola Amigo, nao utilize acentos em nome de class ou ids.

Para facilitar transforme <div class="Cálculo"> para <div class="calculo">

Outro ponto e necessario! O fechamento dos parenteses para que o sistema realize o calculo tente alterar: 

function calcula () {
    alert("A área do triângulo é:" + 1*((base.value*altura.value)/2)
};

para

function calcula () {
    alert("A área do triângulo é:" + 1*((base.value*altura.value)/2))
};

Assim seu codigo ficara da seguinte forma

<div class="calculo">
        <form action="">
            <input type="text" name="base" id="base" placeholder="Base">
            <input type="text" name="altura" id="altura" placeholder="Altura">
            <button>Calcular</button>
        </form>

        <script>

            var base = document.querySelector("#base");
            var altura = document.querySelector("#altura");
            function calcula () {
                alert("A área do triângulo é:" + 1*((base.value*altura.value)/2))
            };

            var button = document.querySelector("button");
            button.onclick = calcula; 


        </script>

    </div>
por Julio Moreno Possebon
| 55.5k xp | 108 posts

Deu certo! Muito obrigado!