I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet:
<html>
<head>
<meta charset = "utf-8">
<title>Calculator</title>
<script type = "text/javascript">
function result(){
btn.value = eval(btn.value);
}
</script>
<style type = "text/css">
.box{
height: 500px;
width: 400px;
background-color: red;
}
.display{
background-color: green;
position: relative;
top:20px;
left:50px;
width:310px;
height:60px;
}
.display input{
color: black;
background-color:yellow;
position:relative;
left:3px;
top:3px;
width:295px;
height:45px;
}
.key{
position:relative;
top:15px;
left:50px;
}
.button{
width:55px;
height:60px;
margin-left:15px;
}
.button.gray{
background-color:gray;
}
.button.black{
color:white;
background-color:black;
}
</style>
</head>
<body>
<div class = "box">
<div class = "display"><input type = "text" readonly size="20" id="btn"></div>
<div class = "key">
<p><input type = "button" class = "button gray" value = "1" onclick="btn.value+=1">
<input type = "button" class = "button gray" value = "2" onclick="btn.value+=2">
<input type = "button" class = "button gray" value = "3" onclick="btn.value+=3">
<input type = "button" class = "button black" value = "+" onclick="btn.value+='+'"></p>
<p><input type = "button" class = "button gray" value = "4" onclick="btn.value+=4">
<input type = "button" class = "button gray" value = "5" onclick="btn.value+=5">
<input type = "button" class = "button gray" value = "6" onclick="btn.value+=6">
<input type = "button" class = "button black" value = "-" onclick="btn.value+='-'"></p>
<p><input type = "button" class = "button gray" value = "7" onclick="btn.value+=7">
<input type = "button" class = "button gray" value = "8" onclick="btn.value+=8">
<input type = "button" class = "button gray" value = "9" onclick="btn.value+=9">
<input type = "button" class = "button black" value = "*" onclick="btn.value+='*'"></p>
<p><input type = "button" class = "button black" value = "%" onclick="btn.value+='%'">
<input type = "button" class = "button gray" value = "0" onclick="btn.value+=0">
<input type = "button" class = "button black" value = "^" onclick="btn.value+='^'">
<input type = "button" class = "button black" value = "/" onclick="btn.value+='/'"></p>
<p><input type = "button" class = "button black" value = "C" onclick="btn.value=''">
<input type = "button" class = "button black" value = "=" onclick="result()";></p>
</div>
</div>
</body>
</html>