70232


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

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

**ソースコード**

[code]

    <!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>
    
[/code]

[code]

    "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);
      })
    }
    
[/code]


CC BY-SA 4.0
2020-09-08T12:37:37.267
70231
2020-09-08T13:26:20.287
2020-09-08T13:26:20.287
3060
41819
question
javascript html
javascriptでbuttonをクリックしても演算子が表示されない


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

つまり

[code]

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

ではなくて

[code]

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

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

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

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

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

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

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


CC BY-SA 4.0
2020-09-08T13:00:49.460
70232
2020-09-08T13:23:17.003
2020-09-08T13:23:17.003
9008
9008
70231
answer