はじめに
2019/11/4 記事編集しました。
ご指摘をくださった @nagtkk さん @loki__qiita さん、ありがとうございました！！！
"uncaught referenceerror $ is not defined" と出会ったときに試すこと
ある研修でもらったjQueryのテキストを引っ張り出してカタカタと打ってみた
動かしてみた
動かんやん
ソースはこちら
calc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./src/calc.js" defer></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" defer></script>
</head>
<body>
<input type="number" id="num-1">
+
<input type="number" id="num-2">
<button id="button-calc"> 計算 </button>
<!-- 動的に計算結果を挿入する箇所 -->
<div id="div-result"></div>
</body>
</html>
calc.js
//フォーカス移動
$('#num-1').focus()
//計算ボタン押下時のイベントを登録
$('#button-calc').on('click', () => {
//画面要素参照
const $num1Element = $('#num-1')
const $num2Element = $('#num-2')
// 入力値取得
const value1 = $num1Element.val()
const value2 = $num2Element.val()
const result = Number(value1) + Number(value2)
alert(`計算結果 = ${result}`)
})
ごくごく普通のThe☆入門編
でも動かない。
テキスト通りなのに動かない
#結論から言うと読み込むライブラリの順番を変えると動く
calc.html
<head>
<meta charset="UTF-8">
<script src="./src/calc.js" defer></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" defer></script>
</head>
この順番だと、calc.jsを実行する時点では jQuery がまだ無いのでエラーとなる。
※jsは上から順に実行される。
なので↓
calc.html
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" defer></script>
<script src="./src/calc.js" defer></script>
</head>
とすれば動くようになる。