I am making calculator using html, css and javascript.HTML and CSS are working but I have issue in javascript as I am still a beginner. I first made a logic to store operands(+,-,*,/) in a variable operand and display it on screen by using innerHTML but operand is not showing in output.I tried using join("") to convert it into string thinking it may display it but it did not.
var operand="";
function store(button) {
if (button.value=="+" || button.value=='-' || button.value=='*' || button.value=='/') {
operand=button.value;
}
document.getElementById("demo").innerHTML=operand.join("");
} .container{
display: flex;
justify-content: center;
align-items: center;
}
.num{
width: 50px;
height: 35px;
text-align: center;
}
.number_Btn{
width: 16%;
height: 300px;
border: 2px solid black;
display: flex;
align-items: flex-end;
}
.zero{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ope{
display: flex;
flex-direction: column;
width: 20%;
height: 140px;
}
.operators{
width: 50px;
height: 35px;
text-align: center;
margin-left: 5px;
}
.display{
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.display p {
margin: 0;;
}<!DOCTYPE html>
<html lang="en">
<head>
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cal.css">
<link rel="stylesheet" href="cal.js">
<title>Calculator</title>
</head>
<body>
<div class="container">
<div class="number_Btn">
<div class="numbering">
<div class="three">
<button value="7" class="num" onclick="store(this)">7</button>
<button value="8" class="num" onclick="store(this)">8</button>
<button value="9" class="num" onclick="store(this)">9</button>
</div>
<div class="six">
<button value="4" class="num" onclick="store(this)">4</button>
<button value="5" class="num" onclick="store(this)">5</button>
<button value="6" class="num" onclick="store(this)">6</button>
</div>
<div class="nine">
<button value="1" class="num" onclick="store(this)">1</button>
<button value="2" class="num" onclick="store(this)">2</button>
<button value="3" id="thr" class="num" onclick="store(this)">3</button>
</div>
<div class="zero">
<button value ="0" class="num" onclick="store(this)">0</button>
<button value ="=" class="num" onclick="store(this)">=</button>
</div>
</div>
<div class="ope">
<button class="operators">+</button>
<button class="operators">-</button>
<button class="operators">*</button>
<button class="operators">/</button>
</div>
</div>
<div class="display">
<p id="demo">display</p>
</div>
</body>
</html>