J'aimerais pouvoir sélectionner les cellules (non pas une ligne). Et quand on clique sur une cellule, elle change de couleur.
J'avais trouvé ça. mais elle ne sélectionne qu'une seule cellule.
var TableCell = changeCouleur()
function changeCouleur(){
document.getElementById("TableCell").style.backgroundColor= '#3349FF';
}
Du coup, j'ai essayé mais rien ne fonctionne.
var TableCell = changeCouleur();
function changeCouleur(){
document.getElementById("TableCell");
for (var i = 0; i < changeCouleur.length; i++) {
TableCell[i].style.backgroundColor= '#3349FF';
}
}
un id doit être unique. Tu penses bien que si tu veux sélectionner une seule cellule, il faut qu'elle ait un identifiant, un truc qui la distingue
Par curiosité, tu cherches à faire quoi, concrètement, avec ce tableau ?
bonjour merci de ta réponse. Excuse moi de la réponse tardive. C'est la création d'un jeu de mémoire pour le public personne âgée.
J'ai pas mis le reste de mon codage car il est pas concerné à ma problématique.
Le soucis en faites c'est que sur ce jeu de mémoire. C'est retenir une liste de mots puis elle disparait et un tableau apparait. Il faut cliquer sur les bon mots de la première liste. Puis automatique quand il aura sélectionné le nombre de mot une correction apparait. puis un résultat de nombre de mot trouvé. Puis rejouer.
Je sais que je tape haut sur l'encodage.
Mais je dois rendre interactive des jeux sur des ateliers découvert l'informatique et internet auprès des personnes âgées.
En restant sur un thème informatique et internet. Merci de votre aide.
( je dois relier les cellules du tableau 1 au tableau 2) En faites les personnes qui clique sur la cellule du tableau 2 qui est le même cellule que le tableau 1.
exemple:
dans le tableau 1 > cellule "chien", "chat"...
dans le tableau 2 >cellule "maison", "chien", "chat", "lapin"....
Le joueur clique sur les cellules qui trouve.
Je demande qu'on me donne pas tout de suite la réponse mais m'orienter. car j'essaye d'apprendre !
au niveau du code au dessus j'ai rajouter une limite de clique mais du coup je n'est plus l'aléatoire ? sachant que j'ai fouiller beaucoup sur le net pour trouver une solution.
/*limite le nombre de cellule sur le tableau 2 qui est égale au nombre de cellule sur le tableau 1*/
function compter() {
var nbClickMax = 7;
let cell = document.getElementsByClassName("divTableCell");
for (let nbClick = 0; nbClick < nbClickMax; nbClick++) {
cell[nbClick].addEventListener('click', changeColor);
}
}
/*selectionne la cellule doit etre selectionner de couleur et aleatoire*/
function changeColor(evt) {
evt.target.style.backgroundColor = "#3349ff";
}
(function (){
let cell = tab3;
for (let i = 0; i < cell; i++) {
cell[i].addEventListener('click', changeColor);
}
}) ();
toujours pas trouver la bonne méthode pour l'aléatoire.
J'ai continué ) avancer sur le code ! Je me suis dit, si je veux que mes cellules de couleur fonctionne. il faut que le tableau 1 apparaisse au tableau 2. donc soit je fusionne mon tableau1 ou les cellules du tableau1. ou alors je duplique ou clonage. Vous en pensez quoi?
alors je me suis documenter sur "concat" ou "object.assign" ou "clone".
mais compliquer de trouver avec le "divtablecell"
du j'ai tester ses codes mais rien ne fonctionne.
/*dupliquer le tableau1*/
var obj = ["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
function clone(obj){
try{
var copy = JSON.parse(JSON.stringify(obj));
} catch(ex){
alert("Vous utilisez un vieux navigateur bien pourri, qui n'est pas pris en charge par ce site");
}
return copy = ["divTablecell"];
}
/*fusionner le tableau 1 au tableau2*/
var tab1 = Array["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
var tab2 = Array["divTableCell"];
var tab3 = ("tab1", "tab2");
Array.prototype.push() == function () {
let tab3 = tab1.concat(tab2);
for (let i = 0; i < tab3.length; i++) {
for (let j = i + 1; j < tab3; j++) {
if (tab3[i] === tab3[j])
tab3.splice(j--, 1);
}
}
return tab3;
};
var tab1 = ["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
var tab2 = ["divTableCell"];
var tab3 = tab1.concat(tab2);
c'est pourrais avancer sur la sélection de mes cellules de couleur
toujours pas trouver la bonne méthode pour l'aléatoire.
J'ai continué ) avancer sur le code ! Je me suis dit, si je veux que mes cellules de couleur fonctionne. il faut que le tableau 1 apparaisse au tableau 2. donc soit je fusionne mon tableau1 ou les cellules du tableau1. ou alors je duplique ou clonage. Vous en pensez quoi?
alors je me suis documenter sur "concat" ou "object.assign" ou "clone".
mais compliquer de trouver avec le "divtablecell"
du j'ai tester ses codes mais rien ne fonctionne.
/*dupliquer le tableau1*/
var obj = ["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
function clone(obj){
try{
var copy = JSON.parse(JSON.stringify(obj));
} catch(ex){
alert("Vous utilisez un vieux navigateur bien pourri, qui n'est pas pris en charge par ce site");
}
return copy = ["divTablecell"];
}
/*fusionner le tableau 1 au tableau2*/
var tab1 = Array["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
var tab2 = Array["divTableCell"];
var tab3 = ("tab1", "tab2");
Array.prototype.push() == function () {
let tab3 = tab1.concat(tab2);
for (let i = 0; i < tab3.length; i++) {
for (let j = i + 1; j < tab3; j++) {
if (tab3[i] === tab3[j])
tab3.splice(j--, 1);
}
}
return tab3;
};
var tab1 = ["divTableCell1", "divTableCell2", "divTableCell3", "divTableCell4", "divTableCell5", "divTableCell6", "divTableCell7"];
var tab2 = ["divTableCell"];
var tab3 = tab1.concat(tab2);
c'est pourrais avancer sur la sélection de mes cellules de couleur
function divTableRow2() {
var itm = document.getElementsByClassName("divTableRow1").lastChild;
var cln = itm.cloneNode(true);
document.getElementsByClassName("divTableRow2").appendChild(cln);
}
J'ai réussi pour le clonage de mon tableau1 au tableau 2. mais pas trouver pour la clique aléatoire. j'ai gardé le principe du clique limité. pour le clonage de la DivTable ainsi j'ai aussi modifié le style sur ma div pour que les deux tableaux apparaissent en même temps.
let array1 = document.getElementById("card1");
let array2 = array1.cloneNode(true);
array2.id = "card3";
document.getElementsByClassName("card2")[0].appendChild(array2)
document.querySelector("#card3").style.display = "block",
document.querySelector("#card3").style.visibility = "hidden";
mais on voit la différence des deux tableaux donc je pense fusionner les deux pour en avoir qu'un seul. Mais il faut que les cellules du tableau 1 soient toujours en mode clonage. Car si je modifie un mot sur les cellules du tableau 1. Il faut qu'ils apparaissent sur le tableau 2. Ainsi que si je clique sur les cellules du tableau2. je puisse trouver les mots du tableau 1. Chaque cellule sélectionner change de couleur.
Bonjour Je vais essayer de t'aider sans te donner de code, c’est bien se que tu veux ? En tout cas, pourrais-tu réexpliquer se que tu veux faire avec tes tableaux ?
Bonjour Je vais essayer de t'aider sans te donner de code, c’est bien se que tu veux ? En tout cas, pourrais-tu réexpliquer se que tu veux faire avec tes tableaux ?
Merci d'avance,
Majoras16Forever
bonjour merci de ta réponse. Excuse moi de la réponse tardive. C'est la création d'un jeu de mémoire pour le public personne âgée.
Le soucis en faites c'est que sur ce jeu de mémoire. C'est retenir une liste de mots(tableau1) puis elle disparait et un tableau(tableau2) apparait avec les mots du tableau 1. Il faut cliquer sur les bon mots (selection cellule en couleur) de la première liste au tableau 2. Puis en automatique, quand il aura sélectionné le nombre de mot au tableau 2 une correction apparaît(changement de couleur) si c'est pas les bon mot.Puis un résultat de nombre de mot trouvé. Puis rejouer.
Je sais que je tape haut sur l'encodage.
Mais je dois rendre interactive des jeux sur des ateliers découvert l'informatique et internet auprès des personnes âgées.
En restant sur un thème informatique et internet. Merci de votre aide.
Je vais fournir le code complet sa sera plus simple que des petits bouts J' ai fait des fichiers à part (js anim, js anim2, css) pour information.
/*afficher après au temps de seconde le tableau 1*/
function showCard2() {
document.getElementsByClassName("card2");
card2.style.visibility = "visible"; // aprés le clique et ses 6 sec
}
function showCard3() {
document.getElementById("card3");
card3.style.visibility = "visible"; // aprés le clique et ses 6 sec
}
/*afficher/masquer le tableau 1*/
function card1() {
divinfo = document.getElementById("card1");
if (divinfo.style.display == 'none')
divinfo.style.display = 'block';
else divinfo.style.display = 'none';
};
/*chrono apres le clique jouer*/
var counter = 5;
var intervalId = null;
function finish() {
clearInterval(intervalId);
document.getElementById("bip").innerHTML = counter;
card1 = divinfo.style.display = 'none'; /*disparaitre le tableau 1*/
}
function bip() {
counter--;
if (counter == 0) finish();
else {
document.getElementById("bip").innerHTML = counter + " secondes restantes";
}
}
function start() {
intervalId = setInterval(bip, 1000);
}
JS anim 2
/*clone le tableau 1 au tableau 2*/
let array1 = document.getElementById("card1");
let array2 = array1.cloneNode(true);
array2.id = "card3";
document.getElementsByClassName("card2")[0].appendChild(array2)
document.querySelector("#card3").style.display = "block",
document.querySelector("#card3").style.visibility = "hidden";
var e = document.getElementsByClassName("divTableCell1");
var f = document.getElementsByClassName("divTableCell2");
var g = document.getElementsByClassName("divTableCell3");
var h = document.getElementsByClassName("divTableCell4");
var l = document.getElementsByClassName("divTableCell5");
var n = document.getElementsByClassName("divTableCell6");
var k = document.getElementsByClassName("divTableCell7");
var m = document.getElementsByClassName("divTableCell");
var o = document.getElementById("card3");
/*limite le nombre de cellule sur le tableau 2 qui est égale au nombre de cellule sur le tableau 1*/
function compter() {
var nbClickMax = 7;
let cell = m;
for (let nbClick = 0; nbClick < nbClickMax; nbClick++) {
cell[nbClick].addEventListener('click', changeColor);
}
};
OU
(function (){
let cell = m;
for (let i = 0; i < cell; i++) {
cell[i].addEventListener('click', changeColor);
}
}) ();
OU
function compter() {
nbClickMax = 7;
cell1 = nbClickMax;
let cell = m;
for (let i = 0; i < nbClickMax.length; i++) {
if (cell1 = cell[i]) {
cell[i]++;
}
cell[i].addEventListener('click', changeColor);
}
}
/*selectionne la cellule doit etre selectionner de couleur et aleatoire*/
function changeColor(evt) {
evt.target.style.backgroundColor = "#3349ff";
}
1. pour les tableaux, tu peux les faire avec "<table>" "<tr>" "<td>"...
2. Je n'utilise pas jQuery pour la même raison, donc pas de problème pour ça
3. Tu as 2 div avec un id "#bip", un id doit être unique
4. Je pense que le mieux à faire est de mettre des class :
- cellule sélectionnée : au lieu de changer le background, ajoute une class ("r-checked", par exemple) et stylise là dans ton CSS, plutôt.
- bonne réponse : si la réponse est bonne, met sur la cellule une class ("r-good", par exemple) qui sera stylisée en CSS, plutôt.
- mauvaise réponse : pareil que pour une bonne réponse mais lâ, une class comme "r-bad », par exemple, qui sera, elle aussi, stylisée dans le CSS.
4. Je n’ai pas vu de verifications des réponses dans ton code, donc je pense que se que tu pourrais faire serait de mettre une class sur les bonne réponses et, quand la personne termine, tu vérifies si les elements ayant la class de réponse ("r-reponse", par exemple) ont aussi la class disant qu'ils sont sélectionnés. Je crois que je ne suis pas clair, je pourrais te réexpliquer si tu n’as pas compris (se qui ne m’étonnerait guère... x) ) ou te donner un exemple (en code).
Je crois avoir fait le tour. Si j’ai oublié des choses, n'hésite pas à me le faire savoir
Majoras16Forever
P.-S.: c´est pas de l'encodage, c’est de la programmation (ou codage, si tu préfères)
- Edité par Majoras16Forever 22 août 2020 à 21:24:01
Merci de ta réponse. J'ai pas trop envie de faire polémique sur les tables ou divtable. En div table c'est mieux pour les tableau dynamique. Apres en table c'est simple! pour des tableaux d'information ou de calcule. Mais c'est un autre sujet. Il y en a qui préfère les table car il sont alaise et d'autre non. Je préfère tester les deux. Sur ce jeu : Je reste en divtable.
Pour la problématique de l'id . j'ai pas élaborer plus loin par rapport au style mais si sa fonctionne avec les style directement dans le CSS. c'est une meilleur solution tout a fait
Tous la partie score, correction pas encore établie le code. Je fais part partie
si je modifie l'id du #bip il prend pas en style le premier chiffre "0". même si j'intègre le style directement dans le CSS. Il est pas pris en compte. Il faut de style séparer pour mettre en avant les deux chiffres.
merci de ta réponse. J'ai pas penser pour les id de cette façon
Quand j'ai vu le post var elem=... j'étais entrain de tester de cette façon. Je vois pas ou je peux mettre les class checked, good, bad. Vu que card3 est pas visible dans le html. Et pour la sélection cellule class r-checked non plus. Il faut que sa soit limiter en clique car dans mon tableau1. J'ai 7 cellules donc je dois cliquer 7 cellules dans le tableau 2 et tableau3. sachant que la tableau3 c'est les réponses. Que je dois mélanger dans le tableau2.
mon idée était de mettre la classe "r-good", par exemple, sur les cellules de ton tableau1 qui étaient les bonne réponses.
Ensuite, sur ton tableau2, quand l'utilisateur sélectionne la cellule, ça lui met la class "r-checked", par exemple.
Enfin, quand tu fais la validation, tu regardes toutes les cellules qui ont la class "r-checked" et, si elles ont aussi la class "r-good", cela veut dire que c'est une bonne réponse, sinon, c'est une mauvaise réponse.
Je peux te faire un exemple en Javascript si tu veux, mais je ne t'en donne pas là car tu as dit que tu n'en voulais pas
P.-S.: si tu veux mettre les class comme je l'expliquais, le plus pratique est de les mettre directement sur tes cellules :
merci de ta réponse. je veux pas la réponse juste une orientation pour que je fais des recherches et trouver le code pour le jeu. j'ai attitré comme tu ma expliquer les class.
Merci de ta réponse. J'ai gardé les nom que tu as mis. Comme c'est une bonne idée Je les rajouter car il sélectionne aussi tous les cellules du tableau2 et tableau3. Avec la function. Car en CSS sa ne fonctionne pas. J'arrive pas.
la class sert à définir sur quelles cellules l'utilisateur a cliqué, pour vérifier si c’est les bonnes réponses plus tard, donc, lorsque l'on clique sur une cellule, si elle a la class "r-checked", on la lui enlève (= si, quand l'utilisateur clique dessus, elle est sélectionné, on la desélectionne) sinon, on la lui met (= si la cellule n'a pas été choisie mais que l'utilisateur clique dessus, il la choisit, et donc on la met comme sélectionnée).
Le mieux selon moi serait de mettre tout ça dans un élément onClick.
Merci de ta réponse. Ah oui, j'ai pas fait attention "#" au code couleur pourtant en dessous je l'ai pas oublier. c'est pour ça que na ne marche pas.
Je reprend dans les cours. "=1" un initiateur de objet pour qui soit effectuer puis "= 0" qu'on ferme l'initiateur.
du coup checked peut être utiliser qu'avec un "id"? vu que je peux utiliser "getElementBuyd".
tu peux le réécrire j'en ai fait un autre différents qui je pense plus cohérent. Mais a force de mettre pleine de code on va plus rien comprendre sur le post.
J'ai réussi à remettre les cliques aléatoire. je suis arriver sur la correction. Dans mon code il corrige qu'une seul case hors j'aimerais qu'il corrige toute les cases. mais à partir de 7 cliques la correction apparaît.
désoler pour le code toujours le problème d'insertion de code qui fonctionne pas pour moi.
var a = document.getElementsByClassName("r-checked");
(function () {
let cell = a;
for (let i = 0; i < cell.length; i++) {
cell[i].addEventListener('click', cellColor);
}
if (cell.onclick = function () {}) {
return a.onclick = checks;
};
})();
var c = document.getElementsByClassName("r-bad");
var b = document.getElementsByClassName("r-good");
function checks() {
var d = 1;
if (d > 7) {
a[d].removeEventListener('click', cellColor);
}
a = d + 1;
if (b[0].checked = true) {
b[0].addEventListener('click', goodColor);
} else c[0].checked = false;
c[0].addEventListener('click', changeColor);
};
function goodColor(evt) {
evt.target.style.backgroundColor = "#3449ff";
}
function changeColor(evt) {
evt.target.style.backgroundColor = "#ff0221";
}
function cellColor(evt) {
evt.target.style.backgroundColor = "#3449ff";
}
- Edité par CedricHens 7 septembre 2020 à 18:26:08
Changement de couleur sur une cellule d'un tableau
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Le dev web est outil de création illimité.
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.
Le dev web est outil de création illimité.
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.