Уређивање појединачног елемента у JavaScript-у

Сада ћемо научити како да уређујемо текстове елемената помоћу поља за унос. Почећемо од једноставних ствари и постепено ћемо их усложњавати.

Дакле, претпоставимо да имамо параграф и инпут, постављене у једном родитељу:

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

Хајде да направимо да се текст из инпута појави у параграфу када инпут изгуби фокус:

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

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

Хајде сада да учинимо да се текст из параграфа већ налази у инпуту приликом уласка на страницу. На тај начин ћемо помоћу инпута моћи да уређујемо текст који се налази у параграфу.

Имплементирајмо:

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

input.value = elem.textContent; // уносимо у инпут текст параграфа

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

Појављивање инпута

Хајде сада да направимо да се инпут иницијално не налази на страници, већ да се појављује при клику на параграф. То јест, наш почетни HTML ће изгледати овако:

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

За почетк, једноставно имплементирајмо појављивање инпута, без могућности уређивања:

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

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

А сада да направимо да се текст параграфа мења при губитку фокуса у инпуту:

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

Међутим, наш код није савршен, јер ће сваки клик на параграф довести до појаве новог инпута.

Да бисмо решили проблем, једноставно ћемо при губитку фокуса уклонити тренутни инпут:

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(); // уклонићемо инпут
  });
  
  elem.parentElement.appendChild(input);
});