J'échoue à lier mon fichier js à mon fichier html.

Sujet résolu

9 janvier 2018 à 22:24:09

Bonjour à tous,

tout est dans le titre, j'échoue à lier mon fichier js à mon fichier html.

ici mon code :

HTML

<!DOCTYPE html>
<html>
 
<head>

  <link rel="stylesheet" type="text/css" href="trainingCode.css">
  <script type="text/javascript" src="trainingCode.js"></script>

</head>
 
 
<body>


</br>
</br>
</br>
 

<video onclick="playVid()" id="myAudio" width="320" height="240" >

  <source src="toZanarkand.mp4" type="video/mp4">
  <source src="toZanarkand.ogg" type="video/ogg">
  Your browser does not support the video tag.
  
</video>

<!-- </br>
  
<button onclick="playVid()" type="button" class="videoButtons">play</button>
<button onclick="pauseVid()" type="button" class="videoButtons">pause</button>

</br>
-->

<button onclick="getVolume()" id="volumeButton" type="button" class="videoButtons"></button>
<button onclick="setHalfVolume()" type="button" class="videoButtons">Set volume to 0.2</button>
<button onclick="setFullVolume();" type="button" class="videoButtons">Set volume to 1.0</button>


</body> 
</html>

 
  var vid = document.getElementById("myAudio"); 


function playVid() {
  
 if (vid.paused) {
        vid.play();
    } else {
        vid.pause();
    }
}

 /*function pauseVid() { 
    vid.pause(); 
}*/

var x = document.getElementById("myAudio");

function getVolume() { 
    alert(x.volume);
} 

function setHalfVolume() { 
    x.volume = 0.2;
}
   
function setFullVolume() { 
    x.volume = 1.0;
}

quand je lance ma page le fichier js échoue à produire le moindre effet tout navigateur confondu. Pourtant, quand j'inscris le script directement dans le code HTML, cela fonctionne parfaitement,

Si vous avez des pistes je suis preneur,

Bien cordialement,

Laurent

noopy360

9 janvier 2018 à 22:29:41

Salut cela vient de l'url qui lie les 2 fichiers

vue ta ligne 7

<script type="text/javascript" src="trainingCode.js"></script>

ta page trainingCode.js doit ce trouver dans le même dossier que ta page HTML

-
Edité par noopy360 9 janvier 2018 à 22:31:23

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Laurent_dchtl

10 janvier 2018 à 3:01:07

pourtant c'est le cas ... j'ai du mal à voir d'où vient le soucy....

Bien cordialement,

Laurent

Mewen_bzh

10 janvier 2018 à 8:53:34

Salut,

La bonne pratique c'est de mettre l'appel à ton fichier js à la fin de ton HTML, juste avant la fermeture de la balise body.

Dans ton code actuel il est possible que l'erreur vient du fait que tu essayes d'agir sur des éléments qui ne sont pas encore chargés dans le DOM.

Et au passage, le saut de ligne en HTML c'est ou mais ça n'existe pas.

Je ne réponds pas aux messages privés.

Lucky13

10 janvier 2018 à 11:32:39

Hello,

+1, La proposition de Mewen_bzh est normalement ta solution, donc juste avant le <body> le document HTML chargé, sous réserve d'un contexte spécial.

Pas besoins de préciser de type, mais c'est un détail.

Tes onclick n'ont rien à faire dans ton HTML, il faut séparer le HTML des événements JS.

ps: Cà depuis depuis un moment que l'on voit tous ces , vous les sortez d'ou ?

-
Edité par Lucky13 10 janvier 2018 à 11:33:48

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Laurent_dchtl

11 janvier 2018 à 1:46:21

parfait, merci à vous :magicien: ,

pour le c'est par mimétisme des autres éléments je pense, merci d'avoir attiré mon attention sur cette particularité,

Bien à vous,

Laurent

noopy360

11 janvier 2018 à 1:54:17

Salut, quand tu parle des autres éléments tu parle surement des balises orphelines

exemple :

<img src="" alt="" /> si on retire les attribus <img />

du coup même par mimétisme tu aurais du écrire

 

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Laurent_dchtl

11 janvier 2018 à 2:59:25

entendu noopy360, j'ai tort ;).

^^.

Lucky13

11 janvier 2018 à 11:28:00

C'es pas que tu es tord , il faut juste ne pas être pressé, bien lire pour comprendre afin de respecter les conventions et travailler les bonnes pratiques.

Même si par la suite tu veux faire du PHP, du JS ou autre sache qu'il te fait une structure HTML clair, valide et optimisée, sinon tu va te compliquer ton apprentissage. Et c'est valable pour tous, comme pour moi

Tu peux utiliser en HTML5 ou , notation xhtml (que je préfère car plus lisible dans mon code, choix perso bien sûr)

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS