Lomakemalli

CSS

HTML

Javascript

// käynnistä sovellus run-painikkeella
// toteutetaan muokkaus alkuperäisen objektin kopiolla 
// päivitetään tiedot vasta kun on painettu tallenna muutokset -painiketta
//<![CDATA[
"use strict";

// mallitietorakenne
let henkilot = [
   {"etunimi": "Tommi", "sukunimi": "Lahtonen"},
   {"etunimi": "Matti", "sukunimi": "Meikäläinen"},
   {"etunimi": "Maija", "sukunimi": "Möttönen"},
];

// siirretty globaalit muuttujat lomakkeen ominaisuuksiksi
document.forms[0].listaus = document.getElementById("listaus");
document.forms[0].muokattava_henkilo = {};
document.forms[0].alkuperainen_henkilo = document.forms[0].muokattava_henkilo;

// alustetaan henkilölistaus. Pyritään rakentamaan
// viitteiden avulla siten, että minimoidaan turhat ja toistuvat haut DOM-puusta
// samoin minimoidaan tietorakenteen läpikäyminen
for(let henkilo of henkilot) {
   let li = document.createElement("li");
   let etunimi = document.createTextNode( henkilo["etunimi"] );  
   let sukunimi = document.createTextNode( henkilo["sukunimi"] );  
   li.appendChild ( etunimi );
   li.appendChild ( document.createTextNode(" ") );
   li.appendChild ( sukunimi );

// tallennetaan li-objektiin viite tietorakenteessa olevaan objektiin
   li.henkilo = henkilo;

// tallennetaan objektin sisältöä listauksessa vastaavien dom-nodejen viitteet myös objektiin
   // jos alkuperäistä objektia ei saa muuttaa niin pitää tehdä tätä varten oma
   // tietorakenne ja tallentaa vastaavat tiedot sinne
   henkilo["listaus"] = {
        "etunimi": etunimi,
        "sukunimi": sukunimi,
   };

li.addEventListener("click", muokkaa);
   document.forms[0].listaus.appendChild(li);   
}

function muokkaa(e) {
  
  // huomaa ero currentTarget vs target
  // currentTarget on elementti, joka käsittelee tapahtuman
  // target on elementti, jota klikattiin
  let henkilo = e.currentTarget.henkilo;
  let lomake = document.forms[0];

// tehdään kopio muokattavista tiedoista
  // muokkaus on aina syytä tehdä kopioon ja muutokset päivitetään
  // tietorakenteeseen vasta, kun ne hyväksytään painikkeella
  // älä koskaan muokkaa suoraan alkuperäistä rakennetta, koska virheiden
  // peruminen tulee mahdottomaksi
  lomake.muokattava_henkilo["etunimi"] = henkilo["etunimi"];
  lomake.muokattava_henkilo["sukunimi"] = henkilo["sukunimi"];

// tallennetaan alkuperäisen henkilön viite
  lomake.alkuperainen_henkilo = henkilo;

// hyödynnetään lomakkeen ominaisuutta jossa lomake-elementit näkyvät suoraan lomakkeen attribuutteina
  // elementin name on sama kuin attribuutin name
  // tässä on varottava käyttämästä samoja nimiä kuin form-objektin olemassa olevilla attribuuteilla ja funktioilla on
  lomake["etunimi"].value = lomake.muokattava_henkilo["etunimi"];
  lomake.sukunimi.value = lomake.muokattava_henkilo["sukunimi"];
}

// tallennetaan muutokset oikeaan henkilöobjektiin
// tässä voisi vielä tehdä halutessaan tarkistuksia
document.forms[0].addEventListener("submit", function (e) {
  e.preventDefault();
  let lomake = e.currentTarget;
  lomake.alkuperainen_henkilo["etunimi"] = lomake.muokattava_henkilo["etunimi"];
  lomake.alkuperainen_henkilo["sukunimi"] = lomake.muokattava_henkilo["sukunimi"];

// päivitetään listaus vastaamaan uusia tietoja
  lomake.alkuperainen_henkilo["listaus"]["etunimi"].textContent =  lomake.muokattava_henkilo["etunimi"];
  lomake.alkuperainen_henkilo["listaus"]["sukunimi"].textContent =  lomake.muokattava_henkilo["sukunimi"];

// tyhjätään lomake
  lomake.reset();
});

// päivitetään yksittäisen kentän muutokset henkilöobjektin klooniin
// tässä voisi myös tehdä tarkistuksia syötteille ja asettaa virheilmoituksia
document.forms[0].etunimi.addEventListener("input", function(e) {
  e.currentTarget.form.muokattava_henkilo["etunimi"] = e.target.value;
});

document.forms[0].sukunimi.addEventListener("input", function(e) {
  e.currentTarget.form.muokattava_henkilo["sukunimi"] = e.target.value;
});
//]]>

CSS

HTML

Javascript

Konsoli