現在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);
})
}