1

Mi programa no imprime nada en "pago" y en "formadePago", siempre imprime lo mismo independiente del boton presionado, entonces cual es el error?

Deseo que imprima la forma de pago, correspondiente al boton presionado y que en 'pago' sea el mismo valor que en 'formaDePago'


Las diferencias entre el primer y segundo intento son el código de Pasajero.prototype ,y que en la segunda añadí un Onclick a los botones



Primer intento:


// ** Usando constructor **

function Pasajero(identificador, nombre, email, celular, edad) {
  
  this.identificador = identificador;
  this.nombre = nombre;
  this.email = email;
  this.celular = celular;
  this.edad = edad;
  
  }

// Variables globales

var efectivo = document.getElementById('efectivo');
var cheque = document.getElementById('cheque');
var tarjeta = document.getElementById('tarjeta');
var evento = document.getElementById('crear');
var pasajeros = []; // Cantidad de pasajeros .length
var persona = "";
var t = "";


// ** Fin Constructor **
  
// ** Prototipo del constructor **

Pasajero.prototype = {
  
  pago: "",
  
  formaDePago: function() {
    
    if (efectivo) {
      return this.pago = 'efectivo';
    }
    else if(cheque){
       return this.pago = 'cheque';
    }
    else if(tarjeta){
       return this.pago = 'tarjeta';
    }
    else {
      console.log("Selecciona método de pago por favor");
    }
    console.log(pago);
    
  }
  
};


// Añadimos un evento con una función anónima..
evento.addEventListener('click', function(){
  
  persona = new Pasajero((pasajeros.length + 1), "aena", "[email protected]", "+56958274822", "24" );
  pasajeros.push((pasajeros.length + 1));
// Recorremos el array
pasajeros.forEach(function(e){console.log(e);});

// Recorremos el objeto creado del constructor
for (var i in persona) {
  
  document.write('<hr></hr>' + i + ": " + (typeof persona[i] === 'function' ? persona[i]() : persona[i]));
 
}
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin  <title>JS Bin</title>
</head>
<body>
<div id="array">
    <input type="button" id="efectivo" value="Efectivo"/>
  <input type="button" id="cheque" value="Cheque"/>
  <input type="button" id="tarjeta" value="Tarjeta"/>
  <hr></hr>
  <input type="button" id="crear" value="Crear Pasajero"/>
  
  </div>
</body>
</html>


Segundo intento:


// ** Usando constructor **

function Pasajero(identificador, nombre, email, celular, edad) {
  
  this.identificador = identificador;
  this.nombre = nombre;
  this.email = email;
  this.celular = celular;
  this.edad = edad;
  
  }

// Variables globales

var efectivo = document.getElementById('efectivo');
var cheque = document.getElementById('cheque');
var tarjeta = document.getElementById('tarjeta');
var evento = document.getElementById('crear');
var pasajeros = []; // Cantidad de pasajeros .length
var persona = "";
var t = "";


// ** Fin Constructor **
  
// ** Prototipo del constructor **

Pasajero.prototype = {
  
  pago: "",
  
  formaDePago: function(t) {
    
    switch(t) {
        
      case 'efectivo': 
        
        return this.pago = 'efectivo';
        
        break;
       
      case 'cheque':
        
        return this.pago = 'cheque';
        
        break;
        
      case 'tarjeta':
        return this.pago = 'tarjeta';
        break;
        
      default: this.pago = 'Selecciona tu forma de pagar';
        
    }
   
}
};


// Añadimos un evento con una función anónima..
evento.addEventListener('click', function(){
  
  persona = new Pasajero((pasajeros.length + 1), "aena", "[email protected]", "+56958274822", "24" );
  pasajeros.push((pasajeros.length + 1));
// Recorremos el array
pasajeros.forEach(function(e){console.log(e);});

// Recorremos el objeto creado del constructor
for (var i in persona) {
  
  document.write('<hr></hr>' + i + ": " + (typeof persona[i] === 'function' ? persona[i]() : persona[i]));
 
}
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin  <title>JS Bin</title>
</head>
<body>
<div id="array">
    <input type="button" id="efectivo" onclick="persona.formaDePago('efectivo')"value="Efectivo"/>
  <input type="button" onclick="persona.formaDePago('cheque')"id="cheque" value="Cheque"/>
  <input type="button" id="tarjeta" onclick="persona.formaDePago('tarjeta')"value="Tarjeta"/>
  <hr></hr>
  <input type="button" id="crear" value="Crear Pasajero"/>
  
  </div>
</body>
</html>

3 respuestas 3

1

La forma de pago la constituyes de la siguiente manera:

if (efectivo) {
   return this.pago = 'efectivo';
}else if(cheque){
   return this.pago = 'cheque';
}else if(tarjeta){
   return this.pago = 'tarjeta';
}else {
   console.log("Selecciona método de pago por favor");
}

Y si te fijas la variable efectivo siempre va a existir, ya que siempre va a existir el botón. Es por eso por lo que te está entrando en la primera condición y está obviando todas las demás, porque la referencia al botón siempre va a estar definida (en este caso en concreto tienes tu botón directamente en el HTML) y no detectas el evento cuando haces click en cada uno de los botones.

Lo que podrías hacer es detectar que botón se ha pulsado de la siguiente manera:

  • Les pones una clase a todos los botones.
  • Haces un manejador(handler) para detectar cuando los botones con esa clase han sido clickados.
  • Mediante la palabra reservada this haces referencia al elemento que acabas de pulsar y obtienes su id.
  • Mediante el id recuperado en el paso anterior puedes añadir el método de pago correspondiente haciendo un switch (en este caso muestro un mensaje en consola de cual se ha pulsado para que se pueda ver el funcionamiento).

Ejemplo:

var botones = document.getElementsByClassName("boton");

for(var i = 0; i < botones.length; i++) {
    botones[i].addEventListener('click', comprueba, false);
}

function comprueba(){
  switch(this.id){
    case "efectivo":
       console.log("hemos pulsado en efectivo");
       break;
    case "cheque":
       console.log("hemos pulsado en cheque");
       break;
    case "tarjeta":
       console.log("hemos pulsado en tarjeta");
       break;
  }
}
<input type="button" id="efectivo" value="Efectivo" class="boton"/>
<input type="button" id="cheque" value="Cheque" class="boton"/>
<input type="button" id="tarjeta" value="Tarjeta" class="boton"/>

1
  • Sin mencionar que a la propiedad pago le asigna un valor hasta que manda llamar la función formaDePago por lo que al recorrer las propiedades en la fila de pago no le muestra nada.
    – Yikarus
    Commented el 14 jun. 2017 a las 18:09
0

me parece que la respuesta de @francisco-romero es bastante acertada asi que solo intentare sumar contenido a su respuesta.

Hay varios detalles que debes tomar en cuenta;

  • la forma de pago es actualizada usando el metodo formaDePago, pero nunca lo invocas en tu codigo
  • no se guarda el estado de la forma de pago elegida y por eso no lo puedes usar
  • supongo que tu codigo es solo un ejemplo, pero usar document.write hara que se impriman todas las personas cada vez que agreges un cliente nuevo, puedes guardar el indice del ultimo cliente creado y luego usar appendChild o innerHTML para agregar a la pantalla solo la informacion del nuevo cliente
  • si la forma de pago no la volveras a modificar, piensa el añadirlo como parametro al constructor de Persona

Puedes convertir los metodos de pago en un grupo de radios, ponerles el mismo id o class y usar document.querySelector para recuperar el radio chequeado document.querySelector('input[id=idDeLosRadios]:checked') (IE9+), si por alguna razon no puedes usar query selector puedes obtener los radios con getElementById o getElementByClassName y luego recorrer el resultado buscando el radio chequeado, asi te ahorras meter cs y js en la logica de tu aplicacion (en aplicaciones grandes puede causar muchos problemas y en aplicaciones pequeñas añade complejidad innecesaria)

// ** Usando constructor **

function Pasajero(identificador, nombre, email, celular, edad) {
  
  this.identificador = identificador;
  this.nombre = nombre;
  this.email = email;
  this.celular = celular;
  this.edad = edad;
  
  }

// Variables globales

var efectivo = document.getElementById('efectivo');
var cheque = document.getElementById('cheque');
var tarjeta = document.getElementById('tarjeta');
var evento = document.getElementById('crear');
var pasajeros = []; // Cantidad de pasajeros .length
var persona = "";
var t = "";


// ** Fin Constructor **
  
// ** Prototipo del constructor **

Pasajero.prototype = {
  
  pago: "",
  
  formaDePago: function(t) {
    
    switch(t) {
        
      case 'efectivo': 
        
        return this.pago = 'efectivo';
        
        break;
       
      case 'cheque':
        
        return this.pago = 'cheque';
        
        break;
        
      case 'tarjeta':
        return this.pago = 'tarjeta';
        break;
        
      default: this.pago = 'Selecciona tu forma de pagar';
        
    }
   
}
};


// Añadimos un evento con una función anónima..
evento.addEventListener('click', function(e){
formaDePago = document.querySelector('input[id=formadePago]:checked').value;
persona = new Pasajero((pasajeros.length + 1), "aena", "[email protected]", "+56958274822", "24");
persona.formaDePago(formaDePago);
pasajeros.push((pasajeros.length + 1));
// Recorremos el array
pasajeros.forEach(function(e){console.log(e);});
// Recorremos el objeto creado del constructor
for (var i in persona) {
  document.write('<hr></hr>' + i + ": " + (typeof persona[i] === 'function' ? persona[i]() : persona[i]));
}
});
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin  <title>JS Bin</title>
</head>
<body>
<div id="array">
  <label><input type="radio" id="formadePago" value="efectivo">Efectivo</input></label>
  <label><input type="radio" id="formadePago" value="cheque">Cheque</input></label>
  <label><input type="radio" id="formadePago" value="tarjeta">Tarjeta</input></label>
  <hr></hr>
  <input type="button" id="crear" value="Crear Pasajero"/>
  
  </div>
</body>
</html>

0

Te recomiendo cambies el campo type="button" por type="checkbox", luego al momento de preguntar lo haces de la siguiente manera if(efectivo.checked) { ... } else if(cheche.checked) { ... } ... y así sucesivamente.

Ahora si desea que solo se pueda seleccionar una forma de pago entonces utiliza type="radio" y colocas la propiedad name="formaDePago" a todas las formas de pago.

Ejemplo:

// ** Usando constructor **

function Pasajero(identificador, nombre, email, celular, edad) {
  
  this.identificador = identificador;
  this.nombre = nombre;
  this.email = email;
  this.celular = celular;
  this.edad = edad;
  
  }

// Variables globales

var efectivo = document.getElementById('efectivo');
var cheque = document.getElementById('cheque');
var tarjeta = document.getElementById('tarjeta');
var evento = document.getElementById('crear');
var pasajeros = []; // Cantidad de pasajeros .length
var persona = "";
var t = "";


// ** Fin Constructor **
  
// ** Prototipo del constructor **

Pasajero.prototype = {
  
  pago: "",
  
  formaDePago: function() {
    
    if (efectivo.checked) {
      return this.pago = 'efectivo';
    }
    else if(cheque.checked){
       return this.pago = 'cheque';
    }
    else if(tarjeta.checked){
       return this.pago = 'tarjeta';
    }
    else {
      console.log("Selecciona método de pago por favor");
    }
    console.log(pago);
    
  }
  
};


// Añadimos un evento con una función anónima..
evento.addEventListener('click', function(){
  
  persona = new Pasajero((pasajeros.length + 1), "aena", "[email protected]", "+56958274822", "24" );
  pasajeros.push((pasajeros.length + 1));
// Recorremos el array
pasajeros.forEach(function(e){console.log(e);});

// Recorremos el objeto creado del constructor
for (var i in persona) {
  
  document.write('<hr></hr>' + i + ": " + (typeof persona[i] === 'function' ? persona[i]() : persona[i]));
 
}
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin  <title>JS Bin</title>
</head>
<body>
<div id="array">
  <input type="radio" name="formaDePago" id="efectivo" value="Efectivo"/>Efectivo...
  <input type="radio" name="formaDePago" id="cheque" value="Cheque"/>Cheque...
  <input type="radio" name="formaDePago"  id="tarjeta" value="Tarjeta"/>Tarjeta...
  <hr></hr>
  <input type="button" id="crear" value="Crear Pasajero"/>
  
  </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.