2016-04-04 9 views
-2

Dies ist eine kleine Übung in W3Schools, die ich in meinem Browser ausprobieren wollte. Die Umschaltanimation funktionierte nicht, wenn ich die Dateien getrennt einstellte, aber es funktionierte, wenn ich das Skript in den HTML-Code einfügte. Binde ich die Dateien falsch, wenn sie getrennt sind? Ich habe auch versucht, das Skript zwischen den Tags zu platzieren, und das hat auch nicht funktioniert. HTML:Habe ich diese HTML- und JavaScript-Datei korrekt verknüpft?

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet"type="text/css"href="main.css"/> 
    </head> 
    <body> 
     <div class="container" onclick="myFunction(x)"> 
      <div class="bar1"></div> 
      <div class="bar2"></div> 
      <div class="bar3"></div> 
     </div> 
    <script type="text/javascript"src="script.js"></script> 
</body> 
</html> 

JS:

function myFunction(x){ 
    x.classList.toggle("change") 
} 

Thank you!

+4

Wenn Sie Ihre JS-Funktion verfügbar sein soll Im HTML müssen Sie es zuerst definieren. Z.B. Setze dein 'script'-Tag in den' head'-Bereich. Nebenbei bemerkt, die Verwendung von JS direkt im HTML-Code ist in der Regel eine schlechte Übung, da es bei größerem Code schwerer zu pflegen ist und zu solchen Fehlern führen kann. W3C macht das hier, weil sie nur kleine Demos sind, daher machen sie sie so kurz und einfach wie sie können. – blex

+0

@blex Sollte nicht wichtig sein, wird JS in Attributen nicht sofort ausgeführt. –

+0

@Hawkeye Sie verwenden die 'toggle'-Methode native [' classList'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), nicht die jQuery-Option. –

Antwort

1

Der Tag

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

ausreichen sollten, wenn Sie die Javascript-Datei als „script.js“ im selben Ordner wie die HTML-Datei gespeichert.

Beachten Sie auch, dass die folgende Zeile keinen Zusammenhang hat für x:

<div class="container" onclick="myFunction(x)"> 

Vielleicht so etwas wie Sie versuchen zu tun:

<div class="container" onclick="myFunction(this)"> 
Verwandte Themen