Lomakemalli

CSS

HTML

Javascript

// käynnistä sovellus run-painikkeella
// tässä esimerkissä ongelmana on muutosten päivittäminen suoraan
// tietorakenteeseen. Mitä jos kämmää ja kirjoittaa jotain väärin?
// ei ole mitään mahdollisuutta perua vaan muutos on heti peruuttamaton
// parempi ratkaisu olisi muokata kopiota ja päivittää tietorakenteeseen
// vasta kun klikataan 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"},
];

// nämä ovat nyt globaaleja muuttujia, mutta koko sovellus voitaisiin
// tehdä omaksi luokaksi tai nämä muuttujat tallentaa esim. lomakkeen
// attribuuteiksi. Vaihtoehtoja on monia

let listaus = document.getElementById("listaus");
let lomake = document.forms[0];

// 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["etunimi_li"] = etunimi;
   henkilo["sukunimi_li"] = sukunimi;

li.addEventListener("click", muokkaa);
   listaus.appendChild(li);   
}

function muokkaa(e) {
  let henkilo = e.target.henkilo;

// tallennetaan henkilön viite
  lomake.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 = henkilo["etunimi"];
  lomake.sukunimi.value = henkilo["sukunimi"];
}

// tätä ei nyt tarvita mihinkään, koska muutokset
// tehtiin suoraan tietorakenteeseen
lomake.addEventListener("submit", function (e) {
  e.preventDefault();

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

// päivitetään yksittäisen kentän muutokset henkilöön
// tässä voisi myös tehdä tarkistuksia syötteille ja asettaa virheilmoituksia
// päivitetään myös listaus
lomake.etunimi.addEventListener("input", function(e) {
  if ( lomake.henkilo ) {  
     lomake.henkilo["etunimi"] = e.target.value;
     lomake.henkilo["etunimi_li"].textContent = e.target.value;
  }
});

lomake.sukunimi.addEventListener("input", function(e) {
  if ( lomake.henkilo ) {  
    lomake.henkilo["sukunimi"] = e.target.value;
    lomake.henkilo["sukunimi_li"].textContent = e.target.value;
  }
});
//]]>

CSS

HTML

Javascript

Konsoli