Analisis
Si observamos el codigo, podemos encontrarnos con la siguiente linea:
calc.addEventListener("click", maths);
Esta le asigna un listener al elemento calc
, pero ¿Que quiere decir esto?
Cuando se haga clic al elemento calc
, este ejecutara una funcion.
¿Donde esta el problema?
El problema viene a darse en el hecho, en que no estamos guardando el resultado retornado de esa funcion en ninguna parte.
Tenemos esta linea:
var um = maths();
document.write(um);
Simplemente ejecuta la funcion maths()
, y listo, el valor
retornado de la funcion maths()
se asigna a la variable um
y se imprime el valor...No pasa nada mas.
¿Porque no nos funciona el boton?
Solo hemos asignado el listener, mas no hemos asignado el resultado de la funcion a algun elemento.
¿Como podriamos solucionarlo?
Una solucion podria ser esta:
/* Asignamos el listener */
var calc = document.getElementById('gosqrt');
calc.addEventListener("click", botonPresionado);
/* Creamos una variable que contendra el resultado */
var resultado;
/**
* Funcion maths()
* Calcula la raiz cuadrada
*/
function calcularRaiz() {
var b = document.getElementById("sqrt").value;
return Math.sqrt(b);
}
/**
* Funcion botonPresionado()
* Funcion a ejecutar cuando se presione el boton
*/
function botonPresionado() {
resultado = calcularRaiz();
alert(resultado);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="sqrt" placeholder="Square root"/>
<input type="button" id="gosqrt" value="Calcular"/>
</body>
</html>
¿Que hemos hecho aca?
Creamos una variable global, llamada resultado
y en ella guardamos el resultado de la funcion calcularRaiz()
(anterior maths()), y ejecutamos un alert()
, para mostrar el resultado de la operacion.