Bonjour à vous !

Contexte : Je souhaite créer un tableau 20x9 pour lequel le survol de chaque case modifie le background de certaines cases d'une matrice (une autre tableau 13x13). Je l'avais créer directement en html/css mais je me rend compte que je dois créer un algorithme capable de le générer afin qu'effectuer des modifications éventuelles soit facilité.

Pour l'instant l'algorithme ne génère qu'une colonne le problème c'est que je n'arrive pas à ajouter les (attributs ?) "onmouseover" et "onmouseout".

function arraycreation(position, antes) {
			for (z=20; z>0; z--){
				if (z < 10) {z = '0' + z;}
				var id = 'bn_' + z + 'bb125';
				var matrixcell = 'btn' + z +'_125';
				console.log('cell :', id);
				var cell = document.createElement("div");
				var deep = 'deep_' + z;
				cell.id = id;
				cell.classList.add('arrawcell', deep);
				cell.addEventListener("mouseenter", bright(matrixcell, _bright));
				document.getElementById('BTN').appendChild(cell);
			}
		}

J'ai trouvé addEventListner mais je ne la comprend pas, j'ai tenté de remplacer "mouseenter" par "onmouseover" mais ça n'était pas ça, mais div sont créer sans aucune attribut onmouseover...

Auriez vous une idée à me proposer ?

Merci de votre temps

PS : ancien code html

    <aside id='antes_125' class='table'>
        <div id='SB' class='position'>
                <div class='arrawcell deep_20' onmouseover="bright(sb20_125, _bright)" onmouseout="bright(sb20_125, _shadow)"       
                <div class='arrawcell deep_19' onmouseover="bright(sb19_125, _bright)" onmouseout="bright(sb19_125, _shadow)"></div>
                <div class='arrawcell deep_18' onmouseover="bright(sb18_125, _bright)" onmouseout="bright(sb18_125, _shadow)"></div>
                <div class='arrawcell deep_17' onmouseover="bright(sb17_125, _bright)" onmouseout="bright(sb17_125, _shadow)"></div>
                <div class='arrawcell deep_16' onmouseover="bright(sb16_125, _bright)" onmouseout="bright(sb16_125, _shadow)"></div>
                <div class='arrawcell deep_15' onmouseover="bright(sb15_125, _bright)" onmouseout="bright(sb15_125, _shadow)"></div>
                <div class='arrawcell deep_14' onmouseover="bright(sb14_125, _bright)" onmouseout="bright(sb14_125, _shadow)"></div>
                <div class='arrawcell deep_13' onmouseover="bright(sb13_125, _bright)" onmouseout="bright(sb13_125, _shadow)"></div>
                <div class='arrawcell deep_12' onmouseover="bright(sb12_125, _bright)" onmouseout="bright(sb12_125, _shadow)"></div>
                <div class='arrawcell deep_11' onmouseover="bright(sb11_125, _bright)" onmouseout="bright(sb11_125, _shadow)"></div>
                <div class='arrawcell deep_10' onmouseover="bright(sb10_125, _bright)" onmouseout="bright(sb10_125, _shadow)"></div>
                <div class='arrawcell deep_09' onmouseover="bright(sb09_125, _bright)" onmouseout="bright(sb09_125, _shadow)"></div>
                <div class='arrawcell deep_08' onmouseover="bright(sb08_125, _bright)" onmouseout="bright(sb08_125, _shadow)"></div>
                <div class='arrawcell deep_07' onmouseover="bright(sb07_125, _bright)" onmouseout="bright(sb07_125, _shadow)"></div>
                <div class='arrawcell deep_06' onmouseover="bright(sb06_125, _bright)" onmouseout="bright(sb06_125, _shadow)"></div>
                <div class='arrawcell deep_05' onmouseover="bright(sb05_125, _bright)" onmouseout="bright(sb05_125, _shadow)"></div>
                <div class='arrawcell deep_04' onmouseover="bright(sb04_125, _bright)" onmouseout="bright(sb04_125, _shadow)"></div>
                <div class='arrawcell deep_03' onmouseover="bright(sb03_125, _bright)" onmouseout="bright(sb03_125, _shadow)"></div>
                <div class='arrawcell deep_02' onmouseover="bright(sb02_125, _bright)" onmouseout="bright(sb02_125, _shadow)"></div>
                <div class='arrawcell deep_01' onmouseover="bright(sb01_125, _bright)" onmouseout="bright(sb01_125, _shadow)"></div>
            </div>
      </aside>

-
Edité par julosd 15 janvier 2021 à 17:22:52

Bonjour, essayes avec cette syntaxe:

cell.addEventListener("mouseenter", function(){bright(matrixcell, "_bright");});

Salut,

Sinon, 'onmouseover' n'est pas un nom d'événement valide pour la méthode 'addEventListener'. Par contre 'mouseover' l'est.

Bonjour, désolé pour le retard de la réponse je planchais sur mon code afin qui fonctionne bien et que je puisse vous expliquer la solution que j'ai trouvé (ça en fera toujours une de plus pour les prochains visiteurs) même si il me semble que la syntaxe de bxdfr corresponde à ce que j'ai pu sauf qu'à chaque fois la fonction était défini à cet endroit et ça n'était pas ce que je voulais. À essayer donc !

Finalement je suis passé par la ligne suivante dans la fonction bright() censée réaliser l'action. Le "id" de l'élément html contient dans son nom tout les caractères pour retrouver les éléments que je cherche (chaque cellule peut être relié de par son id au nom d'une variable js correspondante contenant les données).

var cellule = element.target.id

 la fonction qui génère le tableau contient quant à elle la ligne suivante :

cell.onmouseover = bright;

 ce qui est étrange avec ça c'est que je ne peux pas entrer de paramètre (même si j'en ai pas besoin grâce à target.id c'est embêtant).

Merci pour vos réponses !

PS :

BrainError a écrit:

Salut,

Sinon, 'onmouseover' n'est pas un nom d'événement valide pour la méthode 'addEventListener'. Par contre 'mouseover' l'est.

-
Edité par julosd 26 janvier 2021 à 12:39:44