jQueryを使ってイベント処理でCSSの変更ができない

実現したいこと

・各ボタンを押せば該当する箇所の色が変わるようにしたい。

前提

jQueryを使ってボタンを押せば該当する箇所の色が変わるようにしたいのですが、うまくいきません。
また、cssで円のちょうど真下にボタンが来るように見た目も調整したいのですが、位置がずれてしまっています。

Uncaught ReferenceError: $ is not defined
    at script.js:2:1

該当のソースコード

JavaScript
1// ボタン１処理
2$(function () {
3	$('#button01').on('click', function() {
4		$('#circle01').css('background-color', 'red');
5	});
6});
7
8// ボタン２処理
9(function () {
10	$('#button02').on('click', function() {
11		$('#circle02').css('background-color', 'yellow');
12	});
13});
14
15// ボタン3処理
16(function () {
17	$('#button03').on('click', function() {
18		$('#circle03').css('background-color', 'green');
19	});
20});
21

html
1<!DOCTYPE html>
2<html>
3	<head lang="ja">
4		<title>JavaScript課題1</title>
5		<meta charset="UTF-8">
6		<link rel="stylesheet" href="style.css">
7	</head>
8
9	<body>
10	<div class="turnbox">
11		<div class="box01">
12			<div id="circle01"></div>
13			<button id="button01" type="submit">ボタン1</button>
14		</div>
15		<div class="box02">
16			<div id="circle02"></div>
17			<button id="button02" type="submit">ボタン2</button>
18		</div>
19		<div class="box03">
20			<div id="circle03"></div>
21			<button id="button03" type="submit">ボタン3</button>
22		</div>
23	</div>
24		<scriot src="https://code.jquery.com/iquery-3.6.0.min.js"></scriot>
25		<script src="script.js"></script>
26	</body>
27</html>
28

css
1body {
2	background-color: lightgrey;
3	width: 800px;
4	height: 800px;
5}
6
7 .turnbox {
8	display: flex;
9	width: auto;
10	height: 800px;
11 }
12
13 .box01 {
14	position: relative;
15	height: 130px;
16	width: 100px;
17}
18
19 #circle01 {
20	height: 100px;
21	width: 100px;
22	border-radius: 100px;
23	background-color: white;
24	margin: 0 auto;
25 }
26
27 #button01 {
28	margin: 0 auto;
29	position: absolute;
30 }
31
32 .box02 {
33	position: relative;
34	height: 130px;
35	width: 100px;
36	margin-left: 10px;
37}
38
39 #circle02 {
40	height: 100px;
41	width: 100px;
42	border-radius: 100px;
43	background-color: white;
44 }
45
46 #button02 {
47	margin: 0 auto;
48	position: absolute;
49 }
50
51
52 .box03 {
53	position: relative;
54	height: 130px;
55	width: 100px;
56	margin-left: 3px;
57}
58
59 #circle03 {
60	height: 100px;
61	width: 100px;
62	border-radius: 100px;
63	background-color: white;
64	margin-left: 10px;
65 }
66
67 #button03 {
68	margin: 0 auto;
69	position: absolute;
70 }
71

試したこと

jQueryのイベント処理の方法をgoogle検索やこのサイトで検索してみましたが、参考になるソースコードを見ても、思い通りに直せずにいます。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

１　jqueryをCDNで読み込む部分（htmlの24行目)ですが<script>とすべきところ<scriot>となっています。
２　Javascriptの９行目と16行目。冒頭に$が抜けています。そもそも、$(function(){...});で囲う必要はないと思います。
３　ボタンが中央に揃わないのは、position: absolute;をあてた要素にはmargin:autoは効かないからです。position: absolute;を維持するのであれば

left: 50%;
transform: translateX(-50%);

をあててやると中央に揃います。しかし、私がやってみるとボタンの文字が改行されてしまったので更に

white-space: nowrap;

をあててやるとうまくいきました。
また、position: absolute;を維持する必要がないなら、親要素である.box**に

text-align: center;

をあててやれば、子要素である#button**は中央に揃います。
４　本題には外れますが正円を作るときにborder-radius: 100px;とされていますが、border-radius: 50%;としたほうが良いと思います。前者の書き方だとwidthやheightが変化すると正円でなくなります。もちろんwidthとheightは同じ値であることは条件ですが。

投稿2023/02/21 01:05