带指数的 Javascript 计算器答案

【问题标题】：Javascript calculator with exponents带指数的 Javascript 计算器
【发布时间】：2014-10-23 12:42:31
【问题描述】：

我正在尝试使用 html5、css3 和 javascript 创建一个简单的计算器。我的问题是我的指数按钮似乎不起作用，所有其他操作员按钮都可以正常工作。我的代码如下：

<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>

【问题讨论】：

属性名和值之间可以有空格吗？我会说你不能，或者至少不应该。
我根本没有看到任何 JavaScript。这可能是问题所在。
你想用display.value+=1做什么？什么是“展示”？ “显示”只是一个变量，而不是您的显示输入元素。
@EliasSoares w3.org/html/wg/drafts/html/master/… 但是它不应该在生产 imo 中使用。
我正在尝试通过按 1 的按钮来显示数字 1。这是我目前的目标。感谢您这么快回复。

标签： javascript html css

【解决方案1】：

只是为了好玩 - 部分工作的计算器。 DEMO

为了让你的计算器正常工作，你应该包含一堆 javascript 代码，没有它不会做任何事情。

通过 JQuery on 方法捕获按钮点击。

$('.box').on('click','.button',function(){

【讨论】：

【解决方案2】：

您需要一个脚本（例如 JavaScript）来处理客户端执行的操作。在大多数情况下，HTML 只是一种标记语言（用于显示数据），而 CSS（在 <style></style> 标签中）是一种格式化/设计该标记的方法。您需要一个脚本来处理操作，

HTML: onclick="调用 JavaScript 函数（传入那个按钮的值）"

<p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">

JS：取值作为输入，通过ID（.getElementById(your id)）获取输入框，显示

function showNum (input) {
        var display = document.getElementById("btn");
        display.value = input; 
 }

这是一个有效的粘贴箱：

http://jsbin.com/xijatosate/1/edit?html,css,js,output

【讨论】：

【解决方案3】：

在这里，我为您修复了代码。

function display(val) {
    var dis = document.getElementById("btn");
    dis.value += val;
}

你应该从这个模板开始。我建议您在www.w3schools.com/ 开始您的编码生涯。

玩得开心！

完整代码jsfiddle

【讨论】：

仅链接答案无效，包括示例代码
@NDM 你是什么意思？
大声笑，你知道有编辑历史，对吧？ stackoverflow.com/posts/26528987/revisions 谢谢收听。