Ce qu'il faut, c'est ajouter un évènement click sur claque item, lequel déclenchera une fonction qui se chargera d'afficher le prompt()
et de modifier le texte. Concernant la fonction, c'est simple : on récupère la texte avec this.innerHTML
, que l'on affiche dans le prompt()
en second paramètre :
var output = document.getElementById('output'), items;
if (output) {
items = output.getElementsByTagName('li');
for (var i=0, c=items.length; i<c; i++) {
items[i].onclick = function() {
var originalText = this.innerHTML;
var newText = prompt("Modifiez le texte", originalText);
if (newText) { // Si l'utilisateur n'a pas fait 'Annuler', alors on modifie
this.innerHTML = newText;
}
};
}
}
Mais tout ça est un peu trop verbeux ; faisons plus court :
var output = document.getElementById('output'), items;
if (output) {
items = output.getElementsByTagName('li');
for (var i=0, c=items.length; i<c; i++) {
items[i].onclick = function() {
if (text = prompt("Modifiez le texte", this.innerHTML)) {
this.innerHTML = text;
}
};
}
}
Et y'a même moyen de faire mieux, par exemple en utilisant querySelectorAll()
:
var items = document.querySelectorAll('#output li');
for (var i=0, c=items.length; i<c; i++) {
items[i].onclick = function() {
if (text = prompt("Modifiez le texte", this.innerHTML)) {
this.innerHTML = text;
}
};
}