Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 04 de Noviembre 2017, 12:34
-
Hola. Dejo el Ejercicio CU01143E del tutorial de programación JavaScript desde cero.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow;
font-family: sans-serif; }
h1,h2{text-align:center;}
p {font-size: 20px;
color: maroon;
float: left;
margin:5px;
border: solid black;
padding:5px;}
#boton, #boton2{padding:5px;
margin:5px;
width: 205px;
float:left;
text-align:center;border:solid;
color: white; border-radius: 40px;
background: rgb(202, 60, 60);
box-shadow:5px 5px 10px 5px black;}
#boton:hover, #boton2:hover{background-color:BurlyWood;
box-shadow:5px 5px 10px 5px grey;
color:black;}
#botones{margin-left:550px;
width:500px;
float:left;
clear:both; }
label {color: maroon; display:block; padding:5px;}
#boton2{width:100px;display:none;}
</style>
<script type="text/javascript">
/* ********************************************************************* */
/* **************************EJERCICIO********************************** */
/* ********************************************************************* */
function crearFormulario () {
var nodoForm = document.querySelector('form');
var nuevoNodo = document.createElement('div');
nuevoNodo.innerHTML = '<label for="nombre"><span>Nombre :</span><input id="nombre" type="text" name="nombre" onBlur="validaNombre()"/></label>'+
'<label for="apellidos"><span>Apellidos :</span> <input id="apellidos" type="text" name="apellidos" onBlur="validaApellido()"/></label>'+
'<label for="ingreso"><span>ingreso efectivo :</span> <input id="ingreso" type="text" name="ingreso" onBlur="validarNumero()" /></label>'+
'<label><h3 id="boton2" onclick="crearCuenta()">Actualizar</h3></label>';
document.getElementById('botones').style.display = 'none'; //Ocultar boton
nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#vacio'));
nuevoNodo.style.width="350px";
nuevoNodo.style.border="groove 10px red";
varNombre = document.getElementById("nombre");
varApell = document.getElementById("apellidos");
varIngreso = document.getElementById("ingreso");
}
function crearCuenta(){
var cuenta1 = new CuentaBancaria();
msg = 'SE A CREADO UNA NUEVA CUENTA BANCARIA\n El ingreso es de:' + cuenta1.saldo + ' Euros';
alert (msg);
cuenta1.mostrarDatos();
}
function CuentaBancaria(){
this.nombreTitular = varNombre.value;
this.apellidosTitular = varApell.value;
this.saldo = varIngreso.value;
this.mostrarDatos = function () {
var msg = 'Los datos de la cuenta son:\n Nombre: ' + this.nombreTitular;
msg = msg + '\n Apellidos: ' + this.apellidosTitular + '\n Saldo: ' + this.saldo;
alert(msg);
}
location.reload();
}
/* ********************************************************************* */
/* ********************************************************************* */
/* ********************************************************************* */
function validaNombre(){
var inNombre=varNombre.value
if (inNombre.length<=0){
alert("No se admite el campo Vacio");
varNombre.value="XXX";
varNombre.focus();
varNombre.select();
}
}
function validaApellido()
{
var inApell=varApell.value
if (inApell.length<=0){
alert("No se admite el campo Vacio");
varApell.value="XXX";
varApell.focus();
varApell.select();
}
}
function validarNumero()
{
inIngres=varIngreso.value
if (inIngres.length<=0){
alert("No se admite el campo Vacio");
varIngreso.value="XXX";
varIngreso.focus();
varIngreso.select();
}
else {var Bool=true;}
var m=isNaN(Number(inIngres));
if( m==true){
alert("No se admite texto\n Introduzca un valor Numerico");
varIngreso.value="000";
varIngreso.focus();
varIngreso.select();
}
else if(Bool==true && m==false){
document.getElementById('boton2').style.display = 'block'; //Mostrar boton
}
}
</script>
</head>
<body><div id="cabecera"><h1>CREACIÓN :-X DE UNA CUENTA BANCARIA</h1><h2>Ejercicio CU01143E JavaScript desde cero</h2></div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<div id="vacio" ></div>
</div>
</form>
<div id="botones" >
<h3 id="boton" onclick="crearFormulario()">Crear cuenta bancaria</h3>
</div>
</body></html>
Hasta luego.
:-X
-
Buenas paramonso, repeating again: look at https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 and please follow the rules to write in forums
He probado tu código en Firefox y no me ha funcionado correctamente. Inicialmente, me aparece un botón "Crear cuenta bancaria". Cuando lo pulso, aparece un formulario que pide Nombre, Apellidos e Ingreso Efectivo, pero no aparece ningún botón que permita hacer nada. Si relleno los datos y pulso fuera del formulario aparece un botón actualizar. Cuando pulso ese botón, aparece un error (NS_ERROR_XPC_SECURITY_MANAGER_VETO:)
En definitiva, no veo que el código funcione correctamente. Deberías revisarlo. Una cosa en la que me parece que has incurrido es en tratar de hacer un ejercicio más amplio y con mayor funcionalidad de lo que se pedía. Esto está bien, pero se corre el riesgo de desviarse y tener errores (a más código más posibilidad de tener errores).
Salu2
-
Hola Ogramar.
He probado el código en 4 navegadores (Opera, Firefox, Chromium y Midori ) y en todos funciona según lo previsto en el código.
No se por que a ti no te funciona.
El botón actualizar datos se presenta en pantalla después de perder el enfoque el campo Ingreso en efectivo ya que pasa a la funcion de validacion de datos y si todo es correcto es cuando se presenta en pantalla.
Si presento el botón en pantalla nada mas cargar la página tengo que crear otra función para que no entren los campos vacios y no quise poner mas codigo .
Gracia un saludo.
;)