使用JavaScript將按鈕中的字符串添加到HTML字段

所以我正在製作一個使用HTML，Bootstrap和JavaScript的小型計算器。這裏是計算器（未完成）的截圖：
使用JavaScript將按鈕中的字符串添加到HTML字段

我需要的是增加用戶想要作爲一個字符串對計算器的頂部執行到現場然後評估該字符串的計算。例如：用戶想要計算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>

來源

2015-10-04 Scottie Joe

A [jsfiddle]（http://jsfiddle.net）說超過一千個截圖 – baao

您要搜索的是Element.innerHTML。

我已經爲您編寫了「3」，「+」和「1」的代碼段。我添加了一個像這樣的點擊監聽器onclick="onClick(this)"。函數「onClick」然後將該按鈕的innerHTML添加到id爲「display」（display.innerHTML += button.innerHTML;）的div的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>

進一步閱讀：

來源

2015-10-04 09:52:22 OddDev

使用JavaScript將按鈕中的字符串添加到HTML字段

回答

相關問題