I am looking for a way to automatically generate objects based on the data entered in the input fields.
I have already created a constructor function, but I am unsure about how to pass the data from the inputs to the constructor.
**My goal is to display the name, surname, age, and hobby on the screen.**
<div class="distribucion">
<form class="form">
<label for="nombre">Name:</label>
<input type="text" id="nombre">
<br>
<label for="apellido">Apellido:</label>
<input type="text" id="apellido">
<br>
<label for="edad">Edad: </label>
<input type="text" id="edad">
<br>
<label for="hobbies">Hobbies:</label>
<input type="text" id="Hobbies">
</form>
<div class="btns">
<button id="send">Send</button>
<button id="reset">Reset</button>
</div>
</div>
* {
margin : 0;
padding : 0;
outline : 0;
box-sizing : border-box;
font-family : fantasy
}
body {
background-image: linear-gradient(#cc3290, #c41010);
width : 100%;
height : 100vh;
display : flex;
justify-content : center;
align-items : center;
}
.distribucion {
display : flex;
flex-direction : column;
justify-content : space-around;
align-items : center;
}
.form {
width : 250px;
height : 250px;
box-shadow : 0px 1px 50px #2a2a2a;
border : 1px solid #fff;
border-radius : 15px;
color : #fff;
font-size : 17px;
padding : 10px;
display : flex;
flex-direction : column;
justify-content :space-evenly;
}
.result {
width : 40%;
height : 15%;
border : 2px solid #fff;
border-radius : 10px;
color : #fff;
padding : 10px;
}
.btns {
width : 90px;
height : 100px;
display : flex;
flex-direction : column;
justify-content : space-evenly;
border-left : 15px;
}
button {
cursor : pointer;
border-bottom : 10px;
border-radius : 15px;
padding : 5px 20px;
letter-spacing : 2px;
background-color: transparent;
}
#send {
border : 2px solid #fff;
color : #050505;
}
#reset {
border : 2px solid rgb(15, 15, 15);
color : #ffffff;
}
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);