logo标签列表

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

javascripthtmlformstwitter-bootstrap
4
我正在使用HTML、Bootstrap和JavaScript制作一个小型计算器。这是计算器的截图（未完成）：
screenshot 我需要将用户想要执行的计算添加到该计算器顶部的字段中作为字符串，然后评估该字符串。例如：用户想要计算1 + 3。因此，他们会点击“1”、“+”按钮和“3”按钮，然后它们将出现在“My body is ready”字段中。我想使用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>
1
一个jsfiddle胜过千言万语的截图。 - baao
1个回答
2
你需要查找的是 Element.innerHTML。我已经为您创建了一个代码片段，其中我已经准备好了“3”、“+”和“1”。我添加了一个点击监听器，如下所示：onclick="onClick(this)"。然后，函数“onClick”将按钮的innerHTML添加到具有id“display”的div的innerHTML中（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>

更多阅读：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接