0

現在javascriptで電卓を作っている途中なのですが数字ボタンをクリックすることで数字を<div ID="result">に表示することができたのですが、演算子のボタンをクリックして<div id="Halfway">に表示しようとしても-ボタンは表示できるのですがそれ以外のボタンはクリックしても表示されません。どうしたら表示されるようになるでしょうか。

やってみたこと
要素取得のquerySelectorAllのところのタイプミスせいで演算子の要素が取得できてないため表示されないのかと思い目視した

ソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NEW dentaku</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div id="all">
    <div id="result"></div>
    <div id="Halfway"></div>
    <button class="number" data-num="0">0</button>
    <button class="number" data-num="1" >1</button>
    <button class="number" data-num="2" >2</button>
    <button class="number" data-num="3" >3</button>
    <button class="number" data-num="4" >4</button>
    <button class="number" data-num="5" >5</button>
    <button class="number" data-num="6" >6</button>
    <button class="number" data-num="7" >7</button>
    <button class="number" data-num="8"  >8</button>
    <button class="number" data-num="9" >9</button>
    <button class="operation" deta-ope="+">+</button>
    <button class="operation" data-ope="-">-</button>
    <button class="operation" deta-ope="×">×</button>
    <button class="operation" deta-ope="÷">÷</button>
    <button class="equal" button type="button" data-equal="equal">=</button>
  </div>  
  <script src="main4.js"></script>
</body>
</html>
"use strict"

const obj = {
   numbers:document.querySelectorAll('[data-num]'),
   operater: document.querySelectorAll('[data-ope]'),
   result:document.getElementById('result'),
   Halfway: document.getElementById('Halfway'),

    addNumber: function(number) {
      result_box =+ number;
    },
    display: function(number) {
      result.innerText = number;
    },
    addadd_Number: function(number) {
     const a = result.innerText;
      this.result.innerText = a + number;
    },
    add_Operater: function(opera) {
      const a = opera
      this.Halfway.innerText = opera;
    }
}

for(let i =0; i < obj.numbers.length; i++) {
  obj.numbers[i].addEventListener("click",function() {
    obj.addadd_Number(obj.numbers[i].innerText);
  })
};

for(let a = 0; a < obj.operater.length; a++) {
  obj.operater[a].addEventListener("click", function() {
    obj.add_Operater(obj.operater[a].innerText);
  })
}

1 件の回答 1

0

タイポですね。 '[data-ope]'で検索していますが、そうなっているのは1つだけ(-だけです)です。 ほかは deta-ope とミスタイプしてます。

つまり

<button class="operation" deta-ope="+">+</button>
<button class="operation" data-ope="-">-</button>
<button class="operation" deta-ope="×">×</button>
<button class="operation" deta-ope="÷">÷</button>

ではなくて

<button class="operation" data-ope="+">+</button>
<button class="operation" data-ope="-">-</button>
<button class="operation" data-ope="×">×</button>
<button class="operation" data-ope="÷">÷</button>

と修正すれば動きました。

要素取得のquerySelectorAllのところのタイプミスせいで演算子の要素が取得できてないため表示されないのかと思い目視した

とありますが、見るべきところはJavaScriptのところだけではなくて、HTMLの方も見るべきだったといったところでしょうか。

私はどうやって気づいたかというと

document.querySelectorAll('[data-ope]')

の結果をコンソールに出してみると1件しか取れていないことに気づいたので、HTMLのコードをよく観察するとミスに気づけました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。