#はじめに
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/05 01:36
2018/03/05 01:45
退会済みユーザー
2018/03/05 01:54