Problème à résoudre

Problème à résoudre - HTML/CSS - Programmation

Marsh Posté le 01-09-2023 à 11:48:17    

Bonjour, je m'essaie à un cours javascript mais j'ai toujours une erreur, pouvez vous m'aider ? Merci beaucoup d'avance!
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <script src="javascript01.js"></script>
  9. <body>
  10.     <div class="00">"zero"</div>
  11.     <div class="01">"un"</div>
  12.     <div class="02">"deux"</div>
  13. </body>
  14. </html>
  15. document.getElementsByClassName('01').innerText = "Hello World";


 
l'erreur est toujourds sur le texte

Message cité 1 fois
Reply

Marsh Posté le 01-09-2023 à 11:48:17   

Reply

Marsh Posté le 01-09-2023 à 11:57:53    

Salut,
 
hum c'est quoi cette dernière ligne toute seule hors des balises html la ?
 
Je suppose que soit tu dois remplir ton fichier javascript01.js, soit tu dois rajouter une balise script pour contenir ton code, mais tu ne peux pas le poser comme ça n'importe où :-/
 
Bon courage


---------------
POE
Reply

Marsh Posté le 01-09-2023 à 11:59:47    

merci pour ton retour, la ligne 15 est dans le fichier js qui est appelé dans le code HTML, j'ai pas pu le mettre autrement

Reply

Marsh Posté le 01-09-2023 à 12:08:07    

Ah ok :D
 
Bon du coup si c'est pas un problème de structure on peut s'attaquer au vrai problème et conseils :D
 
Tu utilises cette fonction: getElementsByClassName  
Si tu regardes bien tu as un s a "Elements" ce qui signifie que cela retourne plusieurs éléments et du coup tu obtiens un tableau en retour, donc tu ne peux pas faire directement un .innerText sur un tableau.
 
( Je suppose que tu vas faire une solution direct, mais d'un point de vue "algo", il te faudrait un 2e bout de code pour trouver le bon élément du tableau à modifier :-) )
 
Ensuite pour le conseil : utilise la "console" de ton navigateur web (f12 ou ctrl+shit+i généralement le raccourci) qui permet de faire des tests simple au fur que tu codes :-)


---------------
POE
Reply

Marsh Posté le 01-09-2023 à 12:13:26    

j'ai retiré le s de Elements mais depuis ça donne ça :
 
javascript01.js:1 Uncaught TypeError: document.getElementByClassName is not a function
    at javascript01.js:1:10

Message cité 1 fois
Reply

Marsh Posté le 01-09-2023 à 15:00:24    

La fonction, c'est bien getElementsByClassName() avec un "s" à Element.
Ton pb, c'est que la balise <script> n'est ni dans le <head> ni dans le <body> :o
 
Faut la mettre dans le <head>.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 01-09-2023 à 16:45:16    

fl0645 a écrit :

j'ai retiré le s de Elements mais depuis ça donne ça :
 
javascript01.js:1 Uncaught TypeError: document.getElementByClassName is not a function
    at javascript01.js:1:10

Bah oui, la fonction prend un s mais il faut l'utiliser autrement vu qu'elle retourne un tableau.

Reply

Marsh Posté le 01-09-2023 à 19:14:20    

C'est moi ou de toute façon avec son js appellé dans le head sans listener domready, le DOM ne sera pas encore remplis et donc ça ne renverra de toute façon rien ?
 
Tu devrais commencer par quelque cours en ligne (genre Openclassrooms mais y'en a d'autre) avec les bases pacque la...


---------------
D3
Reply

Marsh Posté le 01-09-2023 à 19:22:40    

fl0645 a écrit :

Bonjour, je m'essaie à un cours javascript mais j'ai toujours une erreur, pouvez vous m'aider ? Merci beaucoup d'avance!
 


C'est quoi ton support de cours ?
Il ne semble pas très moderne car on utilise plutôt querySelector
 
https://developer.mozilla.org/fr/do [...] rySelector

Reply

Marsh Posté le 01-09-2023 à 20:28:52    

c'est un cours sur tuto.com je ne savais pas à ce moment là que c'était presque obsolète ce type d'ordre. J'ai essayé de changer le code mais j'ai le même problème. J'ai des erreurs et le Javascript ne fonctionne pas.
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="javascript01.js"></script>
</head>
 
<body>
    <div id="a00">"zero"</div>
 
</body>
</html>
 
 
 
modèle javascript:
 
document.getElementsById('a00').innerHTML = "Hello World <br />";
document.querySelector('a00').style.backgroundColor='red';

Message cité 1 fois
Reply

Marsh Posté le 01-09-2023 à 20:28:52   

Reply

Marsh Posté le 01-09-2023 à 21:44:14    

fl0645 a écrit :

c'est un cours sur tuto.com je ne savais pas à ce moment là que c'était presque obsolète ce type d'ordre. J'ai essayé de changer le code mais j'ai le même problème. J'ai des erreurs et le Javascript ne fonctionne pas.
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="javascript01.js"></script>
</head>
 
<body>
    <div id="a00">"zero"</div>
 
</body>
</html>
 
 
 
modèle javascript:
 
document.getElementsById('a00').innerHTML = "Hello World <br />";
document.querySelector('a00').style.backgroundColor='red';


 
Il te manque le type de selecteur, ici c'est un ID, donc #  

Code :
  1. document.querySelector('#a00').style.backgroundColor='red';


https://www.alsacreations.com/artic [...] s-api.html
 
Et dans ton fichier javascript01.js, tu dois ajouter un bout de code, comme dit mechkurt

Code :
  1. document.addEventListener("DOMContentLoaded", function () {
  2. document.querySelector('#a00').style.backgroundColor = 'red';
  3. });


Reply

Marsh Posté le 01-09-2023 à 21:56:50    

merci beaucoup, je vais étudier ce code, par l'exemple concret j'apprends mieux, bonne soirée !!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed