Uređivanje pojedinačnog elementa u JavaScriptu

Sada ćemo naučiti kako da uređujemo tekstove elemenata pomoću polja za unos. Počećemo od prostih stvari i postepeno ćemo usložnjavati.

Dakle, pretpostavimo da imamo pasus i input, smešteni u istom roditeljskom elementu:

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

Učinimo da po gubitku fokusa u input polju, njegov tekst bude prenesen u pasus:

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

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

Sada učinimo da se pri učitavanju stranice u input polju već nalazi tekst iz pasusa. Na taj način ćemo pomoću input polja moći da uređujemo tekst koji se nalazi u pasusu.

Implementirajmo:

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

input.value = elem.textContent; // upisujemo u input tekst pasusa

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

Pojavljivanje input polja

Sada učinimo da input polje u početku ne postoji na stranici, već da se pojavi pri kliku na pasus. To znači da će naš početni HTML izgledati ovako:

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

Za početak jednostavno implementirajmo pojavljivanje input polja, bez mogućnosti uređivanja:

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

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

A sada učinimo da se pri gubitku fokusa u input polju menja tekst pasusa:

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);
});

Međutim, naš kod nije savršen, jer će svaki klik na pasus dovesti do pojavljivanja novog input polja.

Da bismo rešili problem, jednostavno ćemo pri gubitku fokusa ukloniti trenutno input polje:

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(); // ukloni input polje
  });
  
  elem.parentElement.appendChild(input);
});