jQueryからJavascriptに変換

Javascriptのめちゃくちゃ初心者です。
計算機アプリのjQueryでの作成の仕方を見つけ動作したので、Javascriptの方が基本なのかなと思ってJavascriptで書いてみました。
でもJavascriptに変更すると、jQueryだと#hyouji内に計算の答えが表示されていたものが真っ白で表示されなくなりました。
答えを表示させるにはJavascriptをどう修正すればよいかをご教示いただければ幸いです。

よろしくお願いいたします。

【html】

<body>
 <div id="content">
   <div id="hyouji"></div>
   <div id="num_box">
      <input id="num1">
      <input id="num2">
   </div>

    <button type="button" class="calbutton" id="plus">＋</button>
    <button type="button" class="calbutton" id="minus">--</button>
    <button type="button" class="calbutton" id="multi">×</button>
    <button type="button" class="calbutton" id="divs">÷</button>

</body>

【jQuery】
$(function () {

  $('.calbutton').click(function() {

var a = +($("#num1").val());
var b = +($("#num2").val());
var c;

 switch($(this).attr("id")){
 case "plus":
 c = a + b;
 break;
 case "minus":
 c = a - b;
 break;
 case "multi":
 c = a * b;
 break;
 case "divs":
 c = a / b;
 break;
}

 $("#hyouji").html(c);

});

});

【Javascript】
document.addEventListener("DOMContentLoaded", function() {

var button = document.getElementsByTagName("button");

button.addEventListener("click", function(e) {
    e.preventDefault();

       var num1 = document.getElementById("num1").value;
       var num2 = document.getElementById("num2").value;
       var sum;

       switch (this.getAttribute("id")) {
       case "plus":
       sum = parseFloat(num1) + parseFloat(num2);
       break;
       case "minus":
       sum = parseFloat(num1) - parseFloat(num2);
       break;
       case "multi":
       sum = parseFloat(num1) * parseFloat(num2);
       break;
       case "divs":
       parseFloat(num1) / parseFloat(num2);
       break;
       }

       var hyouji = document.getElementById("hyouji");
       hyouji.innerHTML = sum;

});

});

試したこと

jQueryとJavascriptの変換を調べて部分部分を置き換えました。

m.ts10806

2020/07/05 06:07

コードはマークダウンのcode機能を利用してご提示ください。あと「うまくいきません」では何も伝わらないので起きている現象(エラーなど)を具体的に記載してください

momotaro_

2020/07/06 09:45

ご指摘ありがとうございます。初めての質問でよくわかっておらず申し訳ありませんでした。追記してみました。

kei344

2020/07/06 14:58

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

momotaro_

2020/07/07 01:00

ありがとうございます。みなさんのおかげで解決できました！

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

回答2件

とりあえずこれがダメだと思う。

javascript
1  var button = document.getElementsByTagName("button");
2
3  button.addEventListener("click", function(e) {

getElementsByTagNameで返るのはHTMLCollectionなので「addEventListener」できない。

めちゃくちゃ初心者なら「jQueryの書き換え」はやめたほうがいいんじゃないかな？

投稿2020/07/05 07:26

編集2020/07/05 07:27

sousuke

総合スコア3830

momotaro_

2020/07/06 09:56

ありがとうございます。どこが間違っているのかもわからなかったので助かりました。 classにクリックイベントをつける記述が見つかりました。

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

自己解決

document.addEventListener("DOMContentLoaded", function() {

function calbuttonClick(e){
    // クリックした際に実行する処理を記述
    e.preventDefault();

       var num1 = document.getElementById("num1").value;
       var num2 = document.getElementById("num2").value;
       var sum;

       switch (this.getAttribute("id")) {
       case "plus":
       sum = parseFloat(num1) + parseFloat(num2);
       break;
       case "minus":
       sum = parseFloat(num1) - parseFloat(num2);
       break;
       case "multi":
       sum = parseFloat(num1) * parseFloat(num2);
       break;
       case "divs":
       sum = parseFloat(num1) / parseFloat(num2);
       break;
       }

       var hyouji = document.getElementById("hyouji");
       hyouji.innerHTML = sum;
       }

       // 引数に指定したclassの値をもつ要素をすべて取得 要素の集合（HTMLCollection）
       const calbuttons = document.getElementsByClassName('calbutton');
       // 上記で取得したすべての要素に対してクリックイベントを適用
       for(let i = 0; i < calbuttons.length; i++) {
       calbuttons[i].addEventListener('click', calbuttonClick);
       }

});

投稿2020/07/06 09:57

momotaro_

総合スコア1