Question

所以我正在使用HTML，Bootstrap和JavaScript制作一个小型计算器。这是计算器的截图（未完成）：

我需要的是将用户想要执行的计算添加到该计算器之上的字段中作为字符串然后评估该字符串。例如：用户想要计算1 + 3.所以他们会点击“1”，“+”按钮和“3”按钮，它们会出现在“我的身体就绪”字段中。我想用JavaScript做到这一点，怎么做到这一点？

这是我为计算器编写的HTML / Bootstrap。

 <head>
 <title>Calculator</title>
</head>

 <body>
 <h1>Calculator</h1>
 <form>
  <div class="form-group">
      <input type="text" class="form-control" id="calculation_body" placeholder="My body is ready.">
  </div>
 </form>

  {{> buttons}}
</body>

<template name="buttons">
<div class="container-fluid">
    <div class="row">
        <div  class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-danger">C</button>
                <button tpye="button" class="btn btn-warning">D</button>
                <button type="button" class="btn btn-primary">÷</button>
                <button type="button" class="btn btn-primary">x</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default">7</button>
                <button type="button" class="btn btn-default">8</button>
                <button type="button" class="btn btn-default">9</button>
                <button type="button" class="btn btn-primary">-</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-primary">+</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-primary">%</button>
            </div>
        </div>
    </div>  
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default">.</button>
                <button type="button" class="btn btn-default">0</button>
                <button type="button" class="btn btn-default">()</button>
                <button type="button" class="btn btn-success">=</button>
            </div>
        </div>
    </div> 
</div>
</template>

Answer 1

您要搜索的是Element.innerHTML。

我为你准备了“3”，“+”和“1”的代码片段。我添加了一个像这样onclick="onClick(this)"的点击监听器。函数“onClick”然后将按钮的innerHTML添加到div的innerHTML，其id为“display”（display.innerHTML += button.innerHTML;）。

您只需使用此行为准备每个按钮。请注意，还有其他选项可用于将单击侦听器添加到按钮。查看object.onclick=function(){myScript};概念here。

此外，getElementsByTagName method会帮助您。

function onClick(button) {
  var display = document.getElementById("display");
  display.innerHTML += button.innerHTML;
}

<div id="display"></div>
<div class="container-fluid">
    <div class="row">
        <div  class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-danger">C</button>
                <button tpye="button" class="btn btn-warning">D</button>
                <button type="button" class="btn btn-primary">÷</button>
                <button type="button" class="btn btn-primary">x</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default">7</button>
                <button type="button" class="btn btn-default">8</button>
                <button type="button" class="btn btn-default">9</button>
                <button type="button" class="btn btn-primary">-</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" onclick="onClick(this)" class="btn btn-primary">+</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" onclick="onClick(this)" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" onclick="onClick(this)" class="btn btn-default">3</button>
                <button type="button" class="btn btn-primary">%</button>
            </div>
        </div>
    </div>  
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-default">.</button>
                <button type="button" class="btn btn-default">0</button>
                <button type="button" class="btn btn-default">()</button>
                <button type="button" class="btn btn-success">=</button>
            </div>
        </div>
    </div> 
</div>

进一步阅读：

使用JavaScript将按钮中的字符串添加到HTML字段

1 个答案: