[Résolu] JS Condition avec valeur numérique dans balise HTML

Bonjour,

Je galère depuis quelques jours sur la mise en forme conditionnelle d'une div selon la valeur incluse dans le span. Cette valeur est numérique.

Voici mon script, je souhaite qu'il se lance au chargement de la page, d'où la fonction window.onload :

<div id="box1" class="box">

<span id="result1">4</span>

<script>
function overall(){	    
var result1 = document.getElementById('result1').value;
var box1=document.getElementById('box1');
if(result1 = 5){
document.getElementById("box1").classList.remove('box');
document.getElementById("box1").classList.add('red-alert');
}
elseif(result1 = 4){
document.getElementById("box1").classList.remove('box');
document.getElementById("box1").classList.add('orange-alert');
else{
}}
window.onload = overall();
</script>

Je précise que les classes "orange-alert" et "red-alert" ont pour fonction de modifier le background en couleur orange et rouge... mais j'imagine que vous aviez compris..

Quelqu'un peut-il m'aider ?

Merci !
Modifié par madeinlocal (18 Sep 2018 - 11:04)

Instancier une variable box1 est plutôt une bonne idée.
Mais quand on fait 4 appels à 'document.getElementById("box1"), cela plombe l'ambiance

@niuxe,
T'as du jaune ?

Mon code modifié avec vos remarques @bazooka07 et @niuxe

<script>
function overall(){	    
var result1 = document.getElementById('result1').value;
var box1=document.getElementById('box1');
if (result1 === 5) {
box1.classList.remove('box');
box1.classList.add('red-alert');
}
else if (result1 === 4) {
box1.classList.remove('box');
box1.classList.add('orange-alert');
}
else{
}
}
window.onload = overall();
</script>

Cela ne fonctionne toujours pas
Modifié par madeinlocal (18 Sep 2018 - 14:09)

Après avoir effectué mes recherches, j'ai trouvé !

Et c'est donc @niuxe qui avait raison, le problème venait des opérateurs de comparaison.

Un grand merci.

Voici le code définitif :

<div id="box1" class="box">

<span id="result1">3</span>

<script>
function overall(){
    
var resultat = document.getElementById('result1').innerHTML;
var boxone = document.getElementById('box1');

if (resultat == 5) {
boxone.classList.remove('box');
boxone.classList.add('red-alert');
}

else if (resultat == 4) {
boxone.classList.remove('box');
boxone.classList.add('orange-alert');
}

else{
}

}
window.onload = overall();
</script>

Je vois plusieurs choses qui ne vont pas dans ce script (redondance, ecriture obsolète (event)). Pourquoi ne fais tu pas ceci ?

var overall = function(){    
    var $resultat = document.getElementById('result1'),
        textResultat = $resultat.textContent,
        clBoxOne = "",
        $boxOne = document.getElementById('box1');

    switch(textResultat){
        case 4:
            clBoxOne = 'orange-alert';
            break;
        case 5:
            clBoxOne = 'red-alert';
            break;

    }
    $boxOne.classList.remove('box');
    $boxOne.classList.add(clBoxOne);

};
window.addEventListener('load', overall);

@bazooka7 : je comprends pas ce que tu veux me dire. Si j'ai du jaune. Enfin quelque part oui, j'ai du jaune devant et du marron derrière.
Modifié par niuxe (18 Sep 2018 - 14:40)