let inpNom = document.getElementById('nombre');
let inpApe = document.getElementById('apellido');
let inpEdad = document.getElementById('edad');
let inpHobb = document.getElementById('Hobbies');
let btnSend = document.getElementById('send');
let btnReset = document.getElementById('reset');
let result = document.getElementById('text');
class Persona {
constructor() {
this.nombre = inpNom.value;
this.inpApe = inpApe.value;
this.inpEdad = inpEdad.value;
this.inpHobb = inpHobb.value;
}
}
function createPerson() {
let newPersona = new Persona
result.textContent = `Hola mi nombre es ${newPersona.nombre} ${newPersona.inpApe} mi edad es ${newPersona.inpEdad} y me gusta mucho hacer ${newPersona.inpHobb}.`;
}
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("input", createPerson)
}
function clearInputs() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = ""
}
inputs[0].dispatchEvent(new Event("input"))
}
ArrObj.get = i =>
{
if (i<ArrObj.length)
{
let el = ArrObj[i]
return `Hola mi nombre es ${el.nombre} ${el.inpApe} mi edad es ${el.inpEdad} y me gusta mucho hacer ${el.inpHobb}.`
}
else return 'out of range'
}
Problem :
I want to generate objects automatically when the data is entered in the inputs.
I have already made a construction function, my doubt is how I make the data received by the constructor to be the data entered in the inputs
**my objective is that the name, surname, age and hobby are printed on the screen **
let inpNom = document.getElementById('nombre');
let inpApe = document.getElementById('apellido');
let inpEdad = Number(document.getElementById('edad'));
let inpHobb = document.getElementById('Hobbies');
let btnSend = document.getElementById('send');
let btnReset = document.getElementById('reset');
let result = document.getElementById('text');
class Persona {
constructor() {
this.nombre = inpNom.nodeValue;
this.apellido = apellido;
this.edad = edad;
this.hobbie = hobbie;
}
copiar() {
result.textContent = `Hola mi nombre es ${this.nombre} ${this.inpApe} mi edad es ${this.inpEdad}
y me gusta mucho hacer ${this.inpHobb}.`;
}
}
function createPerson() {
let create = Persona.prototype.copiar();
}
btnSend.addEventListener('click',createPerson);
Comments
Comment posted by Germán Faller
Why this title is in Spanish?
Comment posted by brian diaz
ups, I already fixed it:)
Comment posted by Germán Faller
do you really need to use a Class?
Comment posted by Endothermic_Dragon
Try selecting all of the inputs using querySelectorAll, looping through them to add an event listener that listens for ‘input’ (
Comment posted by brian diaz
I think so, I want to create several objects
Comment posted by Endothermic_Dragon
Try viewing it full page – the snippet looks weird when it’s small (though it technically still works).
