Úprava jednotlivého prvku v JavaScripte

Teraz sa naučíme upravovať texty prvkov pomocou vstupných polí. Začneme s jednoduchými vecami a budeme postupne komplikovať.

Takže, predpokladajme, že máme daný odsek a vstupné pole, umiestnené v jednom rodičovi:

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

Urobme tak, aby pri strate fokusu vo vstupnom poli sa jeho text objavil v odseku:

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

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

Teraz urobme tak, aby pri načítaní stránky už vo vstupnom poli bol text odseku. Týmto spôsobom budeme môcť pomocou vstupného poľa upravovať text umiestnený v odseku.

Realizujme:

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

input.value = elem.textContent; // zapíšeme do vstupného poľa text odseku

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

Objavenie sa vstupného poľa

Teraz urobme tak, aby vstupné pole spočiatku nebolo na stránke, ale objavilo sa po kliknutí na odsek. To znamená, že náš počiatočný HTML bude vyzerať takto:

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

Na začiatok jednoducho realizujme objavenie sa vstupného poľa, bez úpravy:

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

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

A teraz urobme tak, aby pri strate fokusu vo vstupnom poli sa zmenil text odseku:

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

Náš kód však nie je dokonalý, pretože každé kliknutie na odsek povedie k objaveniu sa nového vstupného poľa.

Na vyriešenie problému jednoducho pri strate fokusu odstránime aktuálne vstupné pole:

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(); // odstránime vstupné pole
  });
  
  elem.parentElement.appendChild(input);
});