मेरे पास वस्तुओं की एक सरणी है जो form भरने और submit पर addEventListener को कॉल करने से नई वस्तुओं से भरी जा रही है।

मैंने event listener के अंदर नई वस्तु को push करने की कोशिश की, लेकिन ऐसा लगता है कि यह केवल फ़ंक्शन के दायरे में काम कर रहा है। क्या इस नई वस्तु को सरणी में जोड़ने का कोई और तरीका है?

यहाँ मेरा कोड है:

const empleados = [{
    nombre: "Kevin",
    apellido: "Malone",
    edad: 30,
  },
  {
    nombre: "Pam",
    apellido: "Beesley",
    edad: 69,
  },
  {
    nombre: "Jim",
    apellido: "Halpert",
    edad: 40,
  },
];
const form = document.querySelector("form");
const table = document.querySelector(".table");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  let nuevoEmpleado = {
    nombre: form.name.value,
    apellido: form.lastname.value,
    edad: form.age.value,
  };
  empleados.push(nuevoEmpleado);
  form.reset();
});
empleados.forEach((chabon) => {
  let html = `<div class="table">
<div class="empleado"><span class="name">Nombre: ${chabon.nombre}</span> <span class="apellido">Apellido: ${chabon.apellido}</span> <span class="edad">Edad: ${chabon.edad}</span></div>
</div>`;
  table.innerHTML += html;
});
form {
  display: flex;
  flex-direction: column;
}

button {
  width: 30%;
}

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}
<div>
  <form action="">
    <span>Nombre</span><input type="text" class="name" name="name">
    <span>Apellido</span><input type="text" class="lastname" name="lastname">
    <span>Edad</span><input type="text" class="age" name="age">
    <button>Agregar</button>
  </form>
  <div class="table">
    <div class="empleado"><span class="name"></span><span class="edad"></span></div>
  </div>
</div>
0
Alan 5 नवम्बर 2020, 00:15

2 जवाब

सबसे बढ़िया उत्तर

वास्तव में, आपका वर्तमान कार्य नई वस्तु (nuevoEmpleado) को सरणी में धकेल रहा है, आप इसे केवल इसलिए नहीं देख रहे हैं क्योंकि आप DOM/HTML को अपडेट नहीं कर रहे हैं या नई वस्तुओं को धकेलने के बाद सरणी को लॉग भी नहीं कर रहे हैं।

इसलिए, एक ऐसा फ़ंक्शन बनाएं जो empleados को आपकी टेबल पर प्रिंट करे। इनिशियलाइज़ेशन पर इस फ़ंक्शन को कॉल करें और हर बार जब एक नया empleado जोड़ा जाता है।

नीचे दिए गए कोड और उसके अंदर की टिप्पणियों को देखें

const empleados = [{
    nombre: "Kevin",
    apellido: "Malone",
    edad: 30,
  },
  {
    nombre: "Pam",
    apellido: "Beesley",
    edad: 69,
  },
  {
    nombre: "Jim",
    apellido: "Halpert",
    edad: 40,
  },
];

const form = document.querySelector("form");
const table = document.querySelector(".table");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  let nuevoEmpleado = {
    nombre: form.name.value,
    apellido: form.lastname.value,
    edad: form.age.value,
  };

  empleados.push(nuevoEmpleado);

  form.reset();
  //"re-print" the empleados, calling the function that does it
  printEmpleados();
});

//HERE: new function that "prints" the empleados to the table
printEmpleados = function() {
  //clear the table HTML before fill it again
  table.innerHTML = "";
  empleados.forEach((chabon) => {
    let html = `<div class="table">
<div class="empleado"><span class="name">Nombre: ${chabon.nombre}</span> <span class="apellido">Apellido: ${chabon.apellido}</span> <span class="edad">Edad: ${chabon.edad}</span></div>
</div>`;
    table.innerHTML += html;
  });
}

//call at startup to start showing 
printEmpleados();
form {
  display: flex;
  flex-direction: column;
}

button {
  width: 30%;
}

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}
<div>
  <form action="">
    <span>Nombre</span><input type="text" class="name" name="name">
    <span>Apellido</span><input type="text" class="lastname" name="lastname">
    <span>Edad</span><input type="text" class="age" name="age">
    <button>Agregar</button>
  </form>
  <div class="table">
    <div class="empleado"><span class="name"></span><span class="edad"></span></div>
  </div>
</div>
4
Calvin Nunes 5 नवम्बर 2020, 00:28

आपकी समस्या यह नहीं है कि ऐरे में कोई अपडेट नहीं है, क्योंकि यह स्पष्ट रूप से काम करता है।

empleados.push(nuevoEmpleado); के ठीक बाद console.log(empleados); जोड़ें

आपकी समस्या यह है कि आपको अपने एचटीएमएल में कोई अपडेट नहीं दिख रहा है। और ऐसा इसलिए है क्योंकि आप उसके बाद तालिका को अपडेट नहीं करते हैं।

3
farvilain 5 नवम्बर 2020, 00:23