Modifier une liste avec prompt()

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

On a utilisé onclick, mais il aurait été possible d'utiliser addEventListener(), ou son équivalent attachEvent() pour les anciennes versions d'Internet Explorer (avant la version 9) :

    for (var i=0, c=items.length; i<c; i++) {
        items[i].addEventListener("click", function() {
            if (text = prompt("Modifiez le texte", this.innerHTML)) {
                this.innerHTML = text;
            }
        }, false);
    }

S'il est nécessaire d'utiliser addEventListener() ou attachEvent(), il vaut mieux posséder une fonction qui se charge d'utiliser le mon listener. Cette fonction, addEvent(), est donnée dans le cours de Javascript :

function addEvent(element, event, func) {
    if (element.addEventListener) {
        element.addEventListener(event, func, false);
    } else {
        element.attachEvent('on' + event, func);
    }
}

var output = document.getElementById('output'), items;

if (output) {
    items = output.getElementsByTagName('li');	
		
    for (var i=0, c=items.length; i<c; i++) {
        addEvent(items[i], "click", function() {
            if (text = prompt("Modifiez le texte", this.innerHTML)) {
                this.innerHTML = text;
            }
        });
    }
}