JSで神経衰弱を作っているのですが、、、
Q&A
Closed
解決したいこと
JS jQUeryを勉強しています。
https://qiita.com/baby-0105/items/5d9b1372934b832f2e37
こちらのページを参考にして作っているのですが、エラーが出てしまいます。
エラーの中身を調べても分からないのでここで質問させて下さい。
発生している問題・エラー
Uncaught ReferenceError: $ is not defined
at index.html:63:15
at index.html:70:5
google翻訳より、Uncaught ReferenceError:$ が定義されていません
該当するソースコード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>07 | 1-jQuery</title>
<link rel="stylesheet" href="../../00-tools/css/reset.css">
<link rel="stylesheet" href="../../00-tools/css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="lists clearfix"></ul>
<script defer>
window.addEventListener( 'load', function(){
function cardShuffle() {
const array1 = [...Array(8).keys()].map(i => ++i),
array2 = [...Array(8).keys()].map(i => ++i);
let array = array1.concat(array2);
for(let i = 0; i < array.length; i++){
let rand = Math.floor(Math.random() * (i+1));
[array[i], array[rand]] = [array[rand], array[i]];
}
return array;
}
const makeLiContents = (function() {
let randNum = cardShuffle(),
html = '',
$ul = $('ul'); // ←エラー箇所？ index.html:63:15
for(let i = 0; i < randNum.length; i++) {
html += "<li data-num=" + randNum[i] + ">?</li>";
}
$ul.append(html);
})(); // ←エラー箇所？ index.html:70:5
const openCard = (function(card) {
let firstCardText, secondCardText, firstClickedData, secondClickedData,
openFirst = true,
openFlag = false,
pair = 0;
return function toOpenCard(card) {
let $listsLi = $(card),
clickedData, clickedText;
if($listsLi.text() === "?") {
if (openFlag){
return;
} else {
openFlag = true;
}
}
if($listsLi.text() === "?") {
clickedData = $listsLi.data("num");
clickedText = $listsLi.text(clickedData);
if(openFirst) {
firstCardText = clickedText;
firstClickedData = clickedData;
openFirst = false;
openFlag = false;
} else {
secondCardText = clickedText;
secondClickedData = clickedData;
compareCard();
openFirst = true;
}
}
function compareCard() {
if(firstClickedData === secondClickedData) {
pair++;
openFlag = false;
if(pair === 8) {
setTimeout(function() {
openFlag = false;
firstCardText.text("?");
secondCardText.text("?");
}, 1000)
}
} else {
setTimeout(function() {
openFlag = false;
firstCardText.text("?");
secondCardText.text("?");
}, 1000)
}
}
};
})();
$(".lists").find("li").on("click", function() {
openCard(this);
});
}, false);
</script>
</body>
</html>
自分で試したこと
定義されていないと出ているのですが定義してますよね、、、と思ってしまいどこをいじればいいのか分からない状態です。
気づいたら3時間が経過していました。。。
宜しくお願い致します！
0
