JavaScript аркылуу жеке элементти оңдоо

Азыр биз элементтердин текстин киргизүү талааларынын жардамы менен оңдоону үйрөнөбүз. Жөнөкөй нерселерден баштап, акырындагы кыйындатабыз.

Ошентип, бизде бир ата-энеде жайгашкан абзац жана input болсун:

html<div id="parent">
  <p id="elem">текст</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">текст</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);
});