Bewerken van een afzonderlijk element in JavaScript

Nu leren we hoe we teksten van elementen kunnen bewerken met behulp van invoervelden. We beginnen met eenvoudige dingen en gaan geleidelijk complexer worden.

Laten we aannemen dat we een alinea en een invoerveld hebben, geplaatst in dezelfde ouder:

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

Laten we ervoor zorgen dat wanneer het invoerveld zijn focus verliest, de tekst ervan in de alinea verschijnt:

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

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

Laten we nu ervoor zorgen dat wanneer de pagina wordt geladen, de tekst van de alinea al in het invoerveld staat. Op deze manier kunnen we met behulp van het invoerveld de tekst in de alinea bewerken.

Laten we dit implementeren:

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

input.value = elem.textContent; // schrijf de alineatekst naar het invoerveld

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

Verschijnen van invoerveld

Laten we nu ervoor zorgen dat het invoerveld initieel niet op de pagina staat, maar verschijnt bij een klik op de alinea. Dat betekent dat onze initiële HTML er als volgt uitziet:

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

Laten we eerst simpelweg het verschijnen van het invoerveld implementeren, zonder bewerkingsfunctionaliteit:

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

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

Laten we nu ervoor zorgen dat wanneer het invoerveld zijn focus verliest, de tekst van de alinea verandert:

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

Onze code is echter niet perfect, omdat elke klik op de alinea zal leiden tot het verschijnen van een nieuw invoerveld.

Om het probleem op te lossen, zullen we simpelweg het huidige invoerveld verwijderen bij focusverlies:

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(); // verwijder het invoerveld
  });
  
  elem.parentElement.appendChild(input);
});