私のサイトでJavascriptが動作しません

私はウェブサイトを作るのに大きな問題があります。何らかの理由で私は何をしても、私はjavascriptを使うことは決してできません。これを有効にするために欠けているものがありますか？私のサイトでJavascriptが動作しません

たとえば、私は非常に単純なものを正確にコピーしました。 https://codepen.io/thetallweeks/pen/boinE

これはテストファイルで

：

<html> 
<head> 
<script> 
$("#button").click(function() { 
    $('.transform').toggleClass('transform-active'); 
}); 
</script> 

<style> 
.box { 
    background-color: #218D9B; 
    height: 100px; 
    width: 100px; 
} 

.transform { 
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -o-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    transition: all 2s ease; 
} 

.transform-active { 
    background-color: #45CEE0; 
    height: 200px; 
    width: 200px; 
} 


</style> 
</head> 

<body> 
<div class="box transform"> 
</div> 

<input type="button" id="button" value="Click Me"></input> 
</body> 


</html>

しかし、ボタンは私のテストファイルに何もしません。どうしたのですか？

出典

2016-06-19 Craig Jones

jqueryがないためです。 –

'$（）'はジェネリックJavaScriptではありません.jQueryです。 jQueryライブラリパッケージをインストールしましたか？ – Claies

確認jQueryのあなたも閉鎖体タグの前に、あなたのjQueryのコード（スクリプトタグ）をロードしたり、文書でそれをラップする必要がありますロードされているにすることに加えてレディファンクションコール。 JQueryがロードされている場合、実際にロードされたイベントをアタッチするHTML要素の前にJQueryが実行されていることが起こります。したがって、基本的にJQueryイベントはあなたのボタン要素をまだ見ることができません。

$(document).ready(function(){ 

    $("#button").click(function() { 
    $('.transform').toggleClass('transform-active'); 
}); 


});

出典

2016-06-19 13:13:18

私はそれをよく理解していませんが、これはやっているようですが、現在は機能しています。私は自分のサイトでjavascriptを使うたびに$（document）.ready（function（）{ ???? –

で関数を始めなければなりません@CraigJones - スクリプトにロードする必要はありませんあなたの閉じたボディータグの直前にタグをつけておきます。 –

$()は、DOMの要素を見つけるためのjQueryショートカットです。 jQuery Libraryを含めましたか？

出典

2016-06-19 13:03:26 User528491

あなたはjQueryのを含めると、それを使用してみましませんでしたので、この問題が発生し、この

<html> 
<head> 
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script> 
$("#button").click(function() { 
    $('.transform').toggleClass('transform-active'); 
}); 
</script> 

<style> 
.box { 
    background-color: #218D9B; 
    height: 100px; 
    width: 100px; 
} 

.transform { 
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -o-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    transition: all 2s ease; 
} 

.transform-active { 
    background-color: #45CEE0; 
    height: 200px; 
    width: 200px; 
} 


</style> 
</head> 

<body> 
<div class="box transform"> 
</div> 

<input type="button" id="button" value="Click Me"></input> 
</body> 


</html>

を試してみてください。スクリプトタグの上に

注追加のスクリプトタグ

出典

2016-06-19 13:04:09

私のサイトでJavascriptが動作しません

答えて

関連する問題