Discussion :

[axolotl_1]

J'utilise un Mac assez ancien de 2014 équipé sous Mojave
Je suis en train de me bagarrer depuis une semaine pour résoudre un bug dans mon programme qui a parfois un comportement aberrant.
Je crois que j'ai essayé pas mal de choses en plus en me faisant aider par chatGPT mais rien ne marche jusqu'à présent.
Est-il possible que ce soit une trop ancienne version de Safari (14.1.2) et qu'il y ait des bugs dans le Webkit et javascript de cette époque ?
Depuis le temps que je me dis qu'il faut que je m'équipe d'un matériel neuf, il faudra que je me décide
Certains d'entre vous ont-ils eu des problèmes analogues sur d'anciennes version de l'OS ?

[Chou-ette]

Quel bug ? Dans quel code ?

[axolotl_1]

C'est une animation pour enfant. J'ai 2 crocodiles de chaque côté de l'écran qui essaient d'attraper un singe au milieu: ils évoluent sur la ligne du bas tous les trois

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.addEventListener("DOMContentLoaded", function() {
 
  var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile1 = document.getElementById("crocodile1");
  var crocodile1Rect = crocodile1.getBoundingClientRect();
  var largeurCroco1 = crocodile1Rect.width;
  var abscisseCroco1 = crocodile1Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile2 = document.getElementById("crocodile2");
  var crocodile2Rect = crocodile2.getBoundingClientRect();
  var largeurCroco2 = crocodile2Rect.width;
  var abscisseCroco2 = crocodile2Rect.right; // Mise à jour de la variable abscisseCroco2
});

Je pensais que du coup toutes les variables étant globales elles devaient se retrouver dans les fonctions appelées au-dessus: mais apparemment non
D'une fonction à l'autre sans rien toucher aux variables, les abscisses des crocos sautent d'une valeur à l'autre d'une façon que je comprends pas
Suis-je obligé de les re-déclarer dans chaque fonction qui les utilisent ?
Bon je débute hein ?

[melka one]

jour

du fait que les variables soient declaré dans une fonction pas sur quels soient global essai en ne mettant pas le mot var

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 singeElement = document.getElementById('singe');
 singeRect = singeElement.getBoundingClientRect();
 largeurSinge = singeRect.width;
 abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge

[axolotl_1]

Merci de ta réponse j'ai changé cela et je les ai déclarées en tête du script avec var devant mais ça ne change rien.
de toute façon j'ai choisi une mauvaise méthode : j'ai commencé à programmer la base de l'animation puis j'ai rajouté des trucs progressivement
Et maintenant je sais plus trop où j'en suis de mes variables

question à 100 francs : y a-t-il un compilateur javascript pour mac ou en ligne où on peut rentrer 1000 lignes de code sans problème ?
Avec des possibilités de debug, ce serait la cerise sur le gâteau

[axolotl_1]

Désolé je reviens au taquet
J'ai un bug incompréhensible
J'ai déclaré des variables globales en-tête du script ==> elles ne se voient pas dans les fonctions plus bas
Je suis obligé de les re-déclarer sous un autre nom dans les fonctions!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile1 = document.getElementById("crocodile1");
  var crocodile1Rect = crocodile1.getBoundingClientRect();
  var largeurCroco1 = crocodile1Rect.width;
  var abscisseCroco1 = crocodile1Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile2 = document.getElementById("crocodile2");
  var crocodile2Rect = crocodile2.getBoundingClientRect();
  var largeurCroco2 = crocodile2Rect.width;
  var abscisseCroco2 = crocodile2Rect.right;

Déjà on dirait que les appels à la console perturbent complètement le fonctionnement du programme ce qui est anormal.
Je crois que je vais arrêter Javascript pour ces bugs fantômes et attendre d'acheter un Mac neuf pour voir si ça fait la même chose

P.S. En fait comme ce sont des images en mouvement il faut les re-déclarer en local dans chaque fonction et sous-fonction genre==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile10 = document.getElementById("crocodile1");
  var crocodile10Rect = crocodile10.getBoundingClientRect();
  var largeurCroco10 = crocodile10Rect.width;
  var abscisseCroco10 = crocodile10Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile20 = document.getElementById("crocodile2");
  var crocodile20Rect = crocodile20.getBoundingClientRect();
  var largeurCroco20 = crocodile20Rect.width;
  var abscisseCroco20 = crocodile20Rect.right;

... et là ça marche disons nettement mieux!
C'est pas ma conception auquel je suis habitué pour les variables globales mais là ça fonctionne beaucoup mieux