Frank_N
Messages postés42Date d'inscriptiondimanche 3 juin 2018StatutMembreDernière intervention 8 août 2019
-
12 juil. 2019 à 20:36
Frank_N
Messages postés42Date d'inscriptiondimanche 3 juin 2018StatutMembreDernière intervention 8 août 2019
-
12 juil. 2019 à 22:56
Bonjour,
J'ai presque fini un petit programme et il me manque une option qu'une fois de plus je n'arrive pas à débloquer ..
Le principe : Un tableau comportant dix chiffres maximum ajouté par l'utilisateur grâce à un input en HTML, le résultat de la somme des chiffres du tableau est calculé dans la dernière case, et j'aimerais qu'en fonction des chiffres ajoutés, la div possède un background-color détérminé à l'avance en CSS, pour tous les chiffres de 0 à 9 la div serait verte, de 10 à 19 div jaune, 20 à 29 div bleue et 30 à 36 div rouge, pour les autres chiffres aucune couleur définie
J'ai tenté plusieurs approches mais le code que j'ai ne fonctionne pas, il est soit incomplet soit au mauvais endroit, c'est pour cette raison que je demande encore votre aide
Précedemment c'est grâce à Jordane45 qui m'a énormément aidé que j'ai pu faire le plus gros mais maintenant il me reste à ajouter les couleurs
// Le tableau de chiffres
var numbersElt = [];
// Selection des éléments du DOM
var numbers = document.getElementById("numbers");
var btn = document.getElementById("valider");
var number = document.getElementById("nb");
// Fonction pour calculer la somme des chiffres du tableau
function sum(input){
if (toString.call(input) !== "[object Array]")
return false;
var total = 0;
for(var i=0;i<input.length;i++){
if(isNaN(input[i])){
continue;
}
total += Number(input[i]);
}
return total;
}
// Fonction pour créer les élements du tableau
function creaElement(i){
let total = document.getElementById("total");
let nbElt = document.createElement("div");
nbElt.classList.add("col-md-1");
nbElt.classList.add("chiffres");
nbElt.textContent = numbersElt[i];
numbers.insertBefore(nbElt, total);
}
// Fonction pour ajouter les éléments au tableau + affichage des éléments sur le DOM
function pushData(e){
e.preventDefault
var chiffre = number.value;
numbersElt.push(chiffre);
console.log('pushdata ',numbersElt.length,number,numbersElt);
if (numbersElt.length > 10){
numbersElt.shift();
console.log('pushdata after shift',numbersElt);
};
numbers.innerHTML = '<div class="col-md-2" id="total"></div>';
number.value = "";
for (var i= 0; i < numbersElt.length; i++) {
creaElement(i);
};
let divChiffre = document.getElementsByClassName("chiffres");
if (numbersElt[i] >= 0 && numbersElt[i] <= 9){
divChiffre.classList.add = ("green");
} else if (numbersElt[i] >= 10 && numbersElt[i] <= 19){
divChiffre.classList.add = ("yellow");
} else if (numbersElt[i] >= 20 && numbersElt[i] <= 29){
divChiffre.classList.add = ("blue");
} else if (numbersElt[i] >= 30 && numbersElt[i] <= 36){
divChiffre.classList.add = ("red");
}
var somme = sum(numbersElt);
total.append(somme);
}
// Evnmt pour l'ajout d'un chiffre
btn.addEventListener("click", pushData);
CodePen: https://codepen.io/Frank-Ngy/pen/BgMrgG
Je vous remercie d'avance ! :)
Configuration: Windows / Firefox 67.0
A voir également:
Ajouter différentes couleur dynamiquement dans une div
12 juil. 2019 à 22:56