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

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}; 這里的概念。

此外， getElementsByTagName 方法將幫助您。

 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 個解決方案

解決方案1
2 2015-10-04 09:52:22

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

問題描述

1 個解決方案

解決方案1 2 2015-10-04 09:52:22

解決方案1
2 2015-10-04 09:52:22