エラーUncaught SyntaxError: Unexpected identifierと出てうまく動作しない

前提

学校の課題でプログラムを作ってるのですが何が間違ってるのかさっぱりわかりません...

実現したいこと

'鋭く引っ張って','華麗に流し打ち','基本はセンター返し'というボタンを押すとそれぞれのボタンを押したときに文字が出力される

発生している問題・エラーメッセージ

24行目でエラーが発生してるってかいてあるのかな？

Uncaught SyntaxError: Unexpected identifier 'i' (at Kadai3.html:24:18)

該当のソースコード

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Kadai3 by1-3 29</title>
	<script>
		let bdata = ['鋭く引っ張って','華麗に流し打ち','基本はセンター返し'];//グローバル変数
		window.onload = function() {
			let newdiv = document.createElement('div');
			for(let i=0;i<bdata.length;i++){
				let newbutton = document.createElement('button');
				newbutton.innerHTML = bdata[i];
				newbutton.className = 'selectbutton';
				newbutton.setAttribute('onclick','btnClick('+i+')');
				newdiv.appendChild(newbutton);
			}
			let newh2 = document.createElement('h2');
			newh2.id = 'msg';
			newdiv.appendChild(newh2);
			document.body.appendChild(newdiv);
		}
		function btnClick(prm) {
			let button=document.getElementsByClassName('selectbutton');//class名がselectbuttonの要素を取り出す
			for(let i =0; i < newbutton.length;i++){//class名がselectbuttonの要素の数だけ繰り返す
				button[i].removeAttribute('disabled');//class名がselectbuttonの要素の'disabled'属性を削除する;
			}//繰り返し終わり
			button[prm].setAtribute('disabled','i');//引数で指定した添え字のselectbuttonの要素の'disabled'属性を'disabled'とする
			document.getElementById('msg').innerHTML = bdata[prm];
		}
</script>
</head>
<body>
</body>
</html>

試したこと

24行目のfor(let i =0; i < newbutton.length;i++)のnewbuttonの部分を色々なクラスに書き換えた

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

win10/GoogleChorme

ここにより詳細な情報を記載してください。

プログラム初心者ところかパソコン初心者で何が間違ってるのかさっぱりわからないです

int32_t

2022/09/08 15:09

本当にこのコードで「Unexpected identifier 'i'」のエラーが出ますか? コードが違ってたりエラーメッセージが違ってたりしませんか。

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

回答1件

解決策

newbuttonはwindow.onload = function ()の中で宣言されているにもかかわらず、スコープ外であるfunction btnClick()のところで呼び出そうとしている。
function btnClick()からlet newbuttonはスコープ外のため参照できないため、「newbuttonという変数は定義されてないよ〜」 というエラーがでています。

javascript
1window.onload = function () {
2  for () {
3    let newbutton = document.createElement('button');
4  }
5}
6
7function btnClick(prm) {
8  for (...newbutton...) { // スコープ外のためlet newbuttonを読めない
9  }
10}

なのでnewbuttonの代わりにbdataでlengthを取ったらいけました！

正解コード

javascript
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Kadai3 by1-3 29</title>
6  <script>
7    let bdata = ['鋭く引っ張って', '華麗に流し打ち', '基本はセンター返し'];
8
9    window.onload = function () {
10      let newdiv = document.createElement('div');
11      for (let i = 0; i < bdata.length; i++) {
12        let newbutton = document.createElement('button');
13        newbutton.innerHTML = bdata[i];
14        newbutton.className = 'selectbutton';
15        newbutton.setAttribute('onclick', 'btnClick(' + i + ')');
16        newdiv.appendChild(newbutton);
17      }
18      let newh2 = document.createElement('h2');
19      newh2.id = 'msg';
20      newdiv.appendChild(newh2);
21      document.body.appendChild(newdiv);
22    }
23
24    function btnClick(prm) {
25      let button = document.getElementsByClassName('selectbutton');
26      for (let i = 0; i < bdata.length; i++) { // newbutton -> bdataに変更。
27        button[i].disabled = false; // ここの書き方変更してみました。
28      }//繰り返し終わり
29      button[prm].disabled = true; // ここの書き方変更してみました。
30      document.getElementById('msg').innerHTML = bdata[prm];
31    }
32  </script>
33</head>
34<body>
35</body>
36</html>

備考

参考までに…

htmlタグの中に<button onclick="myFunction()">と属性をかいてイベントをつける方法は現在非推奨ですので、JavaScript内でクリックイベントを設定するようにしましょう。
- ✅element.onclick = myFunction()
- ✅element.addEventListener('click', myFunction)
変数名は、配列など1つの変数に複数のデータを代入する場合は、複数形の英単語にするのがおすすめです。
- 例）🔺let button = [a, b, c] -> ✅let buttons = [a, b, c]