使用 JavaScript 将字符串从按钮添加到 HTML 字段答案

【问题标题】：Adding a string from buttons to a HTML field using JavaScript使用 JavaScript 将字符串从按钮添加到 HTML 字段
【发布时间】：2016-01-01 03:15:54
【问题描述】：

所以我正在使用 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>

【问题讨论】：

一个jsfiddle 说一千多张截图

标签： javascript html forms twitter-bootstrap

【解决方案1】：

您要搜索的是Element.innerHTML。

我已经为您创建了一个代码 sn-p，其中我已经准备了“3”、“+”和“1”。我添加了一个像这样onclick="onClick(this)" 的点击监听器。函数“onClick”然后将按钮的 innerHTML 添加到 id 为“display”的 div 的 innerHTML (display.innerHTML += button.innerHTML;)。

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

另外，getElementsByTagNamemethod 会帮助您。

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>

进一步阅读：

【讨论】：