Yksittäisen elementin muokkaus JavaScriptillä

Nyt opimme muokkaamaan elementtien tekstejä syöttökenttien avulla. Aloitamme yksinkertaisista asioista ja monimutkaistamme vähitellen.

Oletetaan, että meillä on kappale ja syöttökenttä, jotka sijaitsevat samassa vanhemmassaelementissä:

html<div id="parent">
  <p id="elem">text</p>
  <input id="input">
</div>

Tehdään niin, että kun syöttökenttä menettää fokuksensa, sen teksti ilmestyy kappaleeseen:

javascriptlet elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Tehdään nyt niin, että kun sivu avataan, syöttökentässä on jo kappaleen teksti. Tällä tavalla voimme syöttökentän avulla muokata kappaleessa olevaa tekstiä.

Toteutetaan:

javascriptlet elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // kirjoitetaan syöttökenttään kappaleen teksti

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Syöttökentän ilmestyminen

Tehdään nyt niin, että syöttökenttää ei aluksi ole sivulla, vaan se ilmestyy klikatessa kappaletta. Alkuperäinen HTML näyttää tältä:

html<div id="parent">
  <p id="elem">text</p>
</div>

Aluksi toteutetaan vain syöttökentän ilmestyminen, ilman muokkausta:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.parentElement.appendChild(input);
});

Tehdään nyt niin, että kun syöttökenttä menettää fokuksensa, kappaleen teksti muuttuu:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
  });
  
  elem.parentElement.appendChild(input);
});

Koodimme ei kuitenkaan ole täydellinen, koska jokainen kappaleen klikkaus johtaa uuden syöttökentän ilmestymiseen.

Ratkaistaksesi ongelman, poistetaan nykyinen syöttökenttä fokuksen menetyksen yhteydessä:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
    this.remove(); // poistetaan syöttökenttä
  });
  
  elem.parentElement.appendChild(input);
});