En el código hay los siguientes errores:
1. Error de tipeo
Dice tupe "text"
, debe decir type="text"
. También dice name "verificar"
, debe decir name="verificar"
Corrección:
<input type="text" name="verificar" onclick="verificar()">
2. Usar type="button"
Cambia el type
de los botones a button
. Ya que todo el código es por lado cliente, no necesitas que el botón haga un POST HTTP así que conviene más usar type="button"
Correcciones:
<input type="button" value="Depositar" onclick="depositar()">
...
<input type="button" value="verificar">
...
<input type="button" value="retirar">
3. Ubicación de los onclick
handlers
Los onclick
de verficar
y retirar
deben ir el los botones y no en las cajas de texto
Correcciones:
<input type="button" value="verificar" onclick="verificar()">
...
<input type="button" value="retirar" onclick="retirar()">
4. Método inexistente
No existe document.getElementByName
. El método correcto es getElementsByName
con Elements en plural. Debido a que devuelve un array con varios resultados debes escoger el primer elemento que es el que tiene el input
que estás buscando
Correcciones:
deposito = document.getElementsByName("deposito")[0].value;
...
retiro = document.getElementsByName("retirar")[0].value;
...
document.getElementsByName("verificar")[0].value = saldo;
5. Colisión de nombres
Los inputs verificar
y retirar
se llaman igual que las funciones. Tienes que ponerles nombres diferentes ya están haciendo conflicto a la hora de ejecutar el onclick()
Por ejemplo yo les he cambiado el nombre a los inputs en su declaración y en el código javascript.
Correcciones:
function retirar() {
retiro = parseFloat(document.getElementsByName("retiro")[0].value);
...
}
...
function verificar() {
document.getElementsByName("verificacion")[0].value = saldo;
}
...
<input type="text" name="verificacion">
...
<input type="text" name="retiro" >
6. Validación de los input
El usuario podría ingresar valores que no son números en los inputs por lo que conviene validarlos con la función isNaN()
Por ejemplo si el valor ingresado no es un número se muestra una alert
con el mensaje de error.
function depositar() {
deposito = parseFloat(document.getElementsByName("deposito")[0].value);
if (isNaN(deposito)) {
alert("El valor ingresado no es número válido");
return;
}
saldo = saldo + deposito;
}
function retirar() {
retiro = parseFloat(document.getElementsByName("retiro")[0].value);
if (isNaN(retiro)) {
alert("El valor ingresado no es número válido");
return;
}
if (retiro > saldo) {
alert("Su fondo disposible no es suficiente");
return;
}
saldo = saldo - retiro;
}
7. Tag malformado
El tag </br>
está malformado. Lo correcto es <br />
8. Errores de consistencia
El texto de los botones es inconsistente. "Depositar" comienza con mayúsculas pero "verficar" y "retirar" están en minúsculas
Correcciones:
<input type="button" value="Verificar" onclick="verificar()">
...
<input type="button" value="Retirar" onclick="retirar()">
El código completo te lo muestro a continuación:
var saldo = 0,
deposito, retiro;
function depositar() {
deposito = parseFloat(document.getElementsByName("deposito")[0].value);
if (isNaN(deposito)) {
alert("El valor ingresado no es número válido");
return;
}
saldo = saldo + deposito;
}
function retirar() {
retiro = parseFloat(document.getElementsByName("retiro")[0].value);
if (isNaN(retiro)) {
alert("El valor ingresado no es número válido");
return;
}
if (retiro > saldo) {
alert("Su fondo disposible no es suficiente");
return;
}
saldo = saldo - retiro;
}
function verificar() {
document.getElementsByName("verificacion")[0].value = saldo;
}
<form action="" method="post">
<input type="text" name="deposito" placeholder="Ingrese un deposito" />
<input type="button" value="Depositar" onclick="depositar()">
<br />
<br />
su saldo actual es<br />
<input type="text" name="verificacion">
<input type="button" value="Verificar" onclick="verificar()">
<br />
<br />
<input type="text" name="retiro" >
<input type="button" value="Retirar" onclick="retirar()">
</form>