Bonjour, je suis désolé de déranger pour si peu.

J'aimerais savoir si je suis sur la bonne voie et / ou de l'aide pour m'aider a synthétiser mon code.

En effet, actuellement, j'utilise 3 fonctions quasi-identiques afin de créer des loading bars pour montrer le niveau d'apprentissage de mon code.

function html() {
  var elem = document.getElementById("barone");   
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 70) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
function css() {
  var elem2 = document.getElementById("bartwo");   
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 70) {
      clearInterval(id);
    } else {
      width++; 
      elem2.style.width = width + '%'; 
      elem2.innerHTML = width * 1  + '%';
    }
  }
}
function js() {
  var elem3 = document.getElementById("barthree");   
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 20) {
      clearInterval(id);
    } else {
      width++; 
      elem3.style.width = width + '%'; 
      elem3.innerHTML = width * 1  + '%';
    }
  }
}

C'est super, ça marche, mais ce qu'on peut voir c'est que seul l'id de la div ciblée et le pourcentage de la barre change. J'ai donc eu l'idée de caler ça dans 2 arrays.

var skillBar = ["barone","bartwo","barthree"];
var percentBar = [70, 70, 20];

function skill() {
  for (var j = 0; j < skillBar.length; j++) {
    var elem = document.getElementById(skillBar[j]);   
    console.log(skillBar[j]);      // <-- montre bien barone, bartwo et barthree dans la console
    console.log(percentBar[j]);    // <-- montre bien 70, 70, 20 dans la console
    var width = 0;
    var id = setInterval(frame, 50);
    function frame() {
      console.log(percentBar[j]);  // <-- undefined
       if (width >= percentBar[j]) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1  + '%';
      }    
    }
  }
}  

seulement, le 3ème console log est undefined. Du coup, la loading bar se charge indéfiniment. Et seulement la dernière qui plus est. Les 2 premières restent a 0.

J'ai essayé de sortir la fonction frame, en déclarant la variable width en global (sinon il me dit que width est undefined), puis que elem est undefined...

Bref, je sais que ça pourrait sembler obvious pour vous, mais moi je suis a l'arrêt complet (voir même limite en marche arrière).

Suis je sur la bonne voie?

Merci de m'envoyer une bouée de sauvetage, un kayak, une planche de bois... Bref, n'importe quoi qui puisse me faire remonter a la surface.

Bonne journée a vous.

-
Edité par TomasL 16 avril 2019 à 13:18:04

Bonjour j'ai pas tout tout lu , mais dans l'idée que seul un où deux éléments change dans tes trois fonctions , ça me fait beaucoup pensé à la notion de "paramètres"

function progressBar( idElement ,idInterval , maxWidth ) {
  var elem = document.getElementById(idElement );  
  var width = 0;
  idInterval = setInterval(frame, 50);
  function frame() {
    if (width >= maxWidth) {
      clearInterval(idInterval);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1  + '%';
    }
  }
}
let intervalOne , intervalTwo , intervalThree ;
progressBar("barone" , intervalOne , 70 ) ;
progressBar("bartwo" , intervalTwo , 70 ) ;
progressBar("barthree" , intervalThree , 20 ) ;

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions

-
Edité par SamuelGaborieau3 18 avril 2019 à 6:10:02