Sumar valores de input

[Tropy]

Buenas,

Tengo un pequeño problema que no logro saber por que no funciona como debería...

Tengo esto:

Código Javascript:

Valor numero 1: 
<input id="num1" type="text/javascript" />
Valor numero 2: 
<input id="num2" type="text/javascript" /> 
 
<button onclick="clic()">Calcular</button>
 
<script>
    
    function clic(){
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
    
        var resultado = num1 + num2;
        
        console.log(resultado);
    }
    
</script>
 

El problema es que cuando me va a mostrar el resultado en ves de hacer la suma uno los números... por ejemplo ingreso 3 y 3 y el resultado es 33 en ves de sumarlo y ser 6.

¿A que se podría deber dicho problema.
Cualquier información adicional lo agradecería.

Saludos.

[Alexis88]

Sucede que cualquier valor contenido en un elemento de formulario, como los campos de texto, son interpretados como texto, incluso si son valores numéricos. Para poder operar con ellos, necesitas convertirlos a valores numéricos, para lo cual tienes distintas opciones:



Un saludo

[NeaFan]

De hecho @Alexis88 tiene razon tu problema es que los datos capturados por tus input son interpretados como cadenas de caracteres y lo que haces al usar el operador [+] es concatenar los así:

Código Javascript:

"hola "+"mundo" ==> "hola mundo"
 

En fin Reescribiendo tu código seria algo así:

Código Javascript:

<input id="num1" type="number" />
        Valor numero 2: 
        <input id="num2" type="number" /> 
 
        <button onclick="clic()">Calcular</button>
 
        <script>
 
            function clic() {
                var num1 = document.getElementById("num1").value;
                var num2 = document.getElementById("num2").value;
 
                var resultado = parseFloat(num1) + parseInt(num2);
 
                console.log(resultado);
            }
 
        </script>
 

Date cuenta que convertí el valor contenido en las variables num1 y num2 a tipo numérico en el caso de parseInt(variable) hace un parseo de cadena de caracteres a entero, mientras que parseFloat parsea de cadena de caracteres a flotante «numero con decimales»

Por cierto tengo una apreciación mas, en el atributo type de tu input valuaste con un valor erroneo.