Üksiku elemendi muutmine JavaScriptis

Nüüd õpime muutma elementide tekste sisestusväljade abil. Alustame lihtsatest asjadest ja muudame järjest keerukamaks.

Oletame, et meil on antud lõik ja sisestusväli, mis asuvad samas vanemaelemendis:

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

Teeme nii, et kui sisestusväli kaotab fookuse, ilmub selle tekst lõigus:

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

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

Teeme nüüd nii, et lehele sisenedes on sisestusväljas juba lõigu tekst. Nii saame sisestusvälja abil muuta lõigus olevat teksti.

Rakendame:

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

input.value = elem.textContent; // kirjutame sisestusväljale lõigu teksti

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

Sisestusvälja ilmumine

Teeme nüüd nii, et sisestusvälja algselt lehel ei ole, vaid see ilmub lõigule klõpsates. See tähendab, et meie algne HTML näeb välja selline:

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

Alustuseks lihtsalt rakendame sisestusvälja ilmumise, ilma muutmiseta:

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

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

Ja teeme nüüd nii, et kui sisestusväli kaotab fookuse, muudetakse lõigu teksti:

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

Meie kood pole siiski täiuslik, sest iga lõigule klõpsamine toob kaasa uue sisestusvälja ilmumise.

Probleemi lahendamiseks eemaldame lihtsalt fookuse kaotamisel jooksva sisestusvälja:

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(); // eemaldame sisestusvälja
  });
  
  elem.parentElement.appendChild(input);
});