(function(){
affiche = function(){
document.querySelector("div").innerHTML="";
var i;
for (i=33;i<2000;i++){
//conversion nb->charactere
var val = String.fromCharCode(i);
//création bouton
var newNode =
//ajout des attributs pour le CSS bootstrap
// type bouton
newNode.set...
// class "btn"
newNode.classList.add("btn");
//ajout du contenu
// mettre comme valeur "val i ";
newNode.... = ...
//ajout dans le DOM -> div
document...
if (document.getElementById("val").value==i){
//clonage du newNode pour memoriser les recherches
extraNode = ...
//ajout class "btn-info"
extraNode....
// ajout class "btn-success" à newNode
newNode...
//ajout dans le DOM de extra node juste avant le container
document.querySelector(".container").insertBefore(extraNode,document.querySelector(".container").firstChild);
}
}
};
// creation du listeneur sur le input id = val
document.getElementById("val").addEventListener("change",affiche,true);
})();