Adding a string from buttons to a HTML field using JavaScript

Question

So I'm making a small calculator using HTML, Bootstrap and JavaScript. Here is a screenshot of the calculator (unfinished):

What I need is to add the calculation the user wants to perform into the field on top of that calculator as a string then evaluate that string. For example: The user wants to calculate 1 + 3. So they would click the "1", the "+" button and the "3" button and they would appear in the "My body is ready" field. I want to do this using JavaScript, how can this be done?

Here is the HTML/Bootstrap I've written for the calculator.

 <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>

A jsfiddle says more than a thousand screenshots

baao
– baao

2015-10-04 09:48:02 +00:00
Commented Oct 4, 2015 at 9:48 — baao
– baao, Commented Oct 4, 2015 at 9:48

OddDev · Accepted Answer · 2015-10-04 13:25:00Z

What you are searching for is Element.innerHTML.

I've created a code snippet for you where I've prepared the "3", "+" and "1". I added a click listener like this onclick="onClick(this)". The function "onClick" then adds the innerHTML of the button to the innerHTML of the div with the id "display" (display.innerHTML += button.innerHTML;).

You just have to prepare every button with this behavior. Please note that there are other options available to add the click listener to the buttons. Check out the object.onclick=function(){myScript}; concept here.

Also, the getElementsByTagName method will help you out.

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>

Collectives™ on Stack Overflow

Adding a string from buttons to a HTML field using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related