Уредување на посебен елемент во JavaScript

Сега ќе научиме како да ги уредуваме текстовите на елементите со помош на полиња за внесување. Ќе започнеме со едноставни работи и постепено ќе ги комплицираме.

Значи, нека ни се дадени параграф и input, поставени во еден родител:

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

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

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

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

Сега ајде да направиме така што при влегување на страницата, во input-от веќе да стои текстот на параграфот. На овој начин, со помош на input-от, ќе можеме да го уредуваме текстот лоциран во параграфот.

Да го имплементираме:

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

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

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

Појавување на input

Сега ајде да направиме така што input-от првично да не е на страницата, туку да се појавува при клик на параграфот. Односно, нашиот почетен HTML ќе изгледа вака:

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

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

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

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

А сега ајде да направиме така што при губење на фокусот во 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);
});

Сепак, нашиот код не е совршен, бидејќи секое кликнување на параграфот ќе доведе до појавување на нов input.

За решавање на проблемот, едноставно при губење на фокусот ќе го отстраниме тековниот 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(); // го отстрануваме input-от
  });
  
  elem.parentElement.appendChild(input);
});