0

estoy practicando en javascript un poco de POO (clases,constructores y demás). Tengo un formulario(nombre,apellido,telefono) el cual al apretar el botón debería devolverme en consola el objeto que he creado.

Soy nuevo con POO y con todo lo referido al DOM.

   class Person {
    constructor(fname,lname,cphone){
        this.fname = fname;
        this.lname = lname;
        this.cphone = cphone;
     }
    }

    const btn = document.getElementById('btn');
    btn.addEventListener('submit',function(e){
      const fname = document.getElementById('name').value;
      const lname = document.getElementById('lname').value;
      const cphone = document.getElementById('cphone').value;

      console.log(cphone);

      const personOne = new Person(fname,lname,cphone);
      console.log(personOne.name , personOne.lname , personOne.cphone);
      e.preventDefault();
    });
 <form action="">
            <input type="text" name="nombre" id="name" 
 placeholder="Nombre...">
            <input type="text" name="apellido" id="lname" 
 placeholder="Apellido...">
            <input type="number" name="cphone" id="cphone" min="0" 
 placeholder="Numero...
            ">
            <button type="submit" id="btn">
                Agregar
            </button>
        </form>

3
  • 1
    Pulsa en editar y agrega el HTML. De entrada se ve que intentas asignar un listener de tipo submit a un botón, quizá debería ser del tipo click, pues un submit aplicaría si el elemento btn fuera un formulario.
    – A. Cedano
    Commented el 5 abr. 2021 a las 13:10
  • 1
    como dice el buen @A.Cedano, el boton no tiene el listener de "submit", lo tiene el formulario Commented el 5 abr. 2021 a las 13:11
  • 1
    Hola Arturo, te recomiendo que completes el recorrido de bienvenida de bienvenida y conozcas el formato que esperamos al realizar una pregunta, sobre todo qué es un ejemplo mínimo verificable. Puedes editar tu pregunta y añadir lo que consideres que nos puede ayudar a ayudarte. Commented el 5 abr. 2021 a las 13:11

1 respuesta 1

1

Los botones no tienen evento submit, por lo tanto, puedes escuchar para este caso el evento click del botón.

Por ejemplo:

class Person {
  constructor(fname, lname, cphone) {
    this.fname = fname;
    this.lname = lname;
    this.cphone = cphone;
  }
}

const btn = document.getElementById('btn');
btn.addEventListener('click', function(e) {
  const fname = document.getElementById('name').value;
  const lname = document.getElementById('lname').value;
  const cphone = document.getElementById('cphone').value;

  console.log(cphone);

  const personOne = new Person(fname, lname, cphone);
  console.log(personOne.fname, personOne.lname, personOne.cphone);
  e.preventDefault();
});
<form action="">
  <input type="text" name="nombre" id="name" placeholder="Nombre...">
  <input type="text" name="apellido" id="lname" placeholder="Apellido...">
  <input type="number" name="cphone" id="cphone" min="0" placeholder="Numero...
            ">
  <button type="submit" id="btn">
                Agregar
            </button>
</form>

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.