#はじめに
JavaScriptの入門学習を現在行っております。
HTML5で用意した「足し算」「引き算」「掛け算」「割り算」「余り」のボタンを押すことによって、
alert関数でJavaScript側で用意した変数aとbの値をそれぞれの計算を行った結果を表示したいです。
1つずつ結果を書くことはできるのですが、イメージとしては以下のように処理を行いたいです。

1.ボタンが押される
2.EventListenerによりボタンが押された判定を得る
3.押されたボタンのname要素を確認する
4.そのname要素によってswitch分で出力結果を変更し表示する

しかし、2の時点で現状詰まってしまい、Chromeからのエラー表示に頭を抱えております。
エラーメッセージなどを調べるところタイプミスなどが原因らしいのですが、何度見直してもわかりませんでした。

前述のように途中で詰まってしまってるため、やりたい処理の部分は現状コメントアウトしております。

エディタはSublime　Text3を、ブラウザはChromeを利用しております。
どうぞよろしくお願いします。

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

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
    at HTMLDocument.<anonymous> (question08.js:formatted:2)

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>変換の演算</title>
6<link rel="stylesheet" href="/css/question08.css">
7</head>
8<body>
9<form>
10	<h1>変換の演算</h1>
11	<p>a=10、b=4について、<br>
12	変数「a」と「b」の計算結果を表示します。</p>
13	<p>
14		<input type="button" value="足し算" name="addition" class="buttons">
15		<input type="button" value="引き算" name="subtraction" class="buttons">
16		<input type="button" value="掛け算" name="multiplication" class="buttons">
17		<input type="button" value="割り算" name="division" class="buttons">
18		<input type="button" value="余り" name="remainder" class="buttons">
19	</p>
20	<br>
21	<p><input type="button" value="次へ" name="next" onClick="location.href='http://localhost/question09.html'" style="cursor:pointer;"></p>
22	<p><input type="button" value="戻る" name="previous" onClick="location.href='http://localhost/question07.html'" style="cursor:pointer;"></p>
23</form>
24<script src="/javascript/question08.js"></script>
25</body>
26</html>

JavaScript
1document.addEventListener('DOMContentLoaded', function() {
2	document.getElementsByClassName('buttons').addEventListener('click', function() {
3		/*let a = 10;
4		let b = 4;
5		let ans = 0;
6
7		switch (buttons.name) {
8		case addition:
9			ans = a + b;
10			break;
11		case subtraction:
12			ans = a - b;
13			break;
14		case multiplication:
15			ans = a * b;
16			break;
17		case division:
18			ans = a / b;
19			break;
20		case remainder:
21			ans = a % b;
22			break;
23		default:
24			ans = "ERROR";
25			break;
26		}
27
28		alert("答えは" + ans + "です");*/
29	});
30}, false);

css
1input.buttons {
2	margin-left: 15px;
3}

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

回答2件

ベストアンサー

getElementsByClassNameで戻ってくるのはHTMLCollectionといって
HTMLElementのグループです。
残念ながらHTMLCollectionにはaddEventListenerは用意されていません。

考え方は３つ

document.addEventLitenerでdocumentにつけてその中でタグ名やnameで限定して処理をつける
document.getElementsByClassNameでHTMLCollectionで受けた上で、ループ処理で各HTMLElementに対して個別にaddEventListenerする
そもそもnameがわかっているのだから最初からnameをつかって処理

sample

１番上の例

javascript
1document.addEventListener('click', function(e) {
2  var a = 10;
3  var b = 4;
4  var ans = 0;
5  var t=e.target;
6  if(t.nodeName=="INPUT" && t.type=="button"){
7    switch (t.name) {
8    case "addition":
9      ans = a + b;
10      break;
11    case "subtraction":
12      ans = a - b;
13      break;
14    case "multiplication":
15      ans = a * b;
16      break;
17    case "division":
18      ans = a / b;
19      break;
20    case "remainder":
21      ans = a % b;
22      break;
23    default:
24      ans = "ERROR";
25      break;
26    }
27    alert("答えは" + ans + "です");
28  }
29});

HTML
1<form>
2    <h1>変換の演算</h1>
3    <p>a=10、b=4について、<br>
4    変数「a」と「b」の計算結果を表示します。</p>
5    <p>
6        <input type="button" value="足し算" name="addition" class="buttons">
7        <input type="button" value="引き算" name="subtraction" class="buttons">
8        <input type="button" value="掛け算" name="multiplication" class="buttons">
9        <input type="button" value="割り算" name="division" class="buttons">
10        <input type="button" value="余り" name="remainder" class="buttons">
11        <input type="button" value="ダミー" name="other" class="buttons">
12    </p>
13    <br>
14    <p><input type="button" value="次へ" name="next" onClick="location.href='http://localhost/question09.html'" style="cursor:pointer;"></p>
15    <p><input type="button" value="戻る" name="previous" onClick="location.href='http://localhost/question07.html'" style="cursor:pointer;"></p>
16</form>
17

投稿2018/03/02 09:16

編集2018/03/02 09:31

yambejp

総合スコア114769

退会済みユーザー

2018/03/05 01:36

お早い回答ありがとうございます！自分の知りたいところをぴったり教えてくださり、とても助かりました。しかし、サンプルで動作確認しているところまた一つ疑問ができてしまったのですが、 JavaScript1行目のfunction(e)と書かれている部分には具体的に何が引数として渡されているのでしょうか？その記法をすることにより渡されるプロパティなどがあるのでしょうか？自身の知らない用法なため戸惑ってしまいました、よろしくお願いします。

yambejp

2018/03/05 01:45

> function(e)と書かれている部分これはaddEventListenerで拾ったイベントです e.typeを参照すれば「click」が返りますし e.targetを参照すればどのタグをクリックしたかを返します

退会済みユーザー

2018/03/05 01:54

度々お早いご対応ありがとうございます！大まかなところから細かい質問まで疑問を解消できました、とても助かりました！ベストアンサーとして選ばせていただきます、改めてありがとうございました。

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

ループさせて、それぞれにaddEventListenerしてしまえばいいかと

javascript
1document.addEventListener('DOMContentLoaded', function() {
2	var buttons = document.getElementsByClassName('buttons');
3	for (i = 0; i < buttons.length; i++) {
4		buttons[i].addEventListener('click', function() {
5			/*let a = 10;
6			let b = 4;
7			let ans = 0;	
8
9			switch (buttons.name) {
10			case addition:
11				ans = a + b;
12				break;
13			case subtraction:
14				ans = a - b;
15				break;
16			case multiplication:
17				ans = a * b;
18				break;
19			case division:
20				ans = a / b;
21				break;
22			case remainder:
23				ans = a % b;
24				break;
25			default:
26				ans = "ERROR";
27				break;
28			}
29
30			alert("答えは" + ans + "です");*/
31		});
32	}
33}, false);