このHTMLファイルとJavaScriptファイルは正しくリンクされていますか？

-2

これは私のブラウザで試したかったW3Schoolsの小さな練習です。ファイルを別々に設定すると、トグルアニメーションは機能しませんでしたが、HTML内にスクリプトを置くと機能しました。ファイルが分かれているときに間違ってリンクしていますか？私も<head>タグの間にスクリプトを置こうとしましたが、それもうまくいきませんでした。 HTML：このHTMLファイルとJavaScriptファイルは正しくリンクされていますか？

<!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") 
}

ありがとうございます！あなたがHTMLファイルと同じフォルダ内に「script.js」としてのJavascriptファイルを保存した場合

出典

2016-04-04 tombros

をHTMLでは、最初に定義する必要があります。例えば。あなたの 'script'タグを' head'セクションに入れてください。副次的なことに、JSをHTMLコードで直接使用することは、大規模なコードでは維持するのが難しく、そのような間違いにつながる可能性があるため、一般に悪い習慣です。 W3Cはちょうど小さなデモであるため、ここで実行します。したがって、できるだけ短く簡単にします。 – blex

@blex属性のJSはすぐには実行されません。 –

@Hawkeye jQueryのトグルではなく、ネイティブの['classList']（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）' toggle'メソッドを使用しています。 –

タグ

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

で十分です。

はまた、次の行がxのコンテキストを持っていないことに気づく：

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

たぶん、あなたのような何かをしようとしている：あなたはJSの機能が利用できるようにしたい場合は

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

出典

2016-04-04 22:15:22

このHTMLファイルとJavaScriptファイルは正しくリンクされていますか？

答えて

関連する問題