Basic Calculator - event binding using pure JavaScript

Question

Basic Calculator - event binding using pure JavaScript

852 Views Asked by appu At 15 April 2025 at 20:24

I am completely new to the JavaScript .When I am looking to get the value to the button its get failed. I already given the setEvent.Like getEle(); And also bind the click function, now I want to get the input values and perform mathematical calculations.

<!DOCTYPE html>
   <html>
   <head>
      <title>Simple Calculator</title>
     <link rel="stylesheet" type="text/css" href="calculator.css">
    </head>
 <body>
    <div id="container" >
       <div class="calculator">
           <ul>
              <li>
                  <div id="display">
                    <span id="math"></span>
                    <span id="number"></span>
                </div>
            </li>
            <li>
                <button class="input" value="7">7</button>
                <button class="input" value="8">8</button>
                <button class="input" value="9">9</button>
                <button class="control" value="/">&#247;</button>
                <button class="undo" value="-1">&#8592;</button>
            </li>
            <li>
                <button class="input" value="4">4</button>
                <button class="input" value="5">5</button>
                <button class="input" value="6">6</button>
                <button class="control" value="*">&#215;</button>
                <button class="clear">C</button>
            </li>
            <li>
                <button class="input" value="1">1</button>
                <button class="input" value="2">2</button>
                <button class="input" value="3">3</button>
                <button class="control" value="-">-</button>
                <button class="control" value="%">%</button>
            </li>
            <li>
                <button class="input size2" value="0">0</button>
                <button class="input" value=".">&#8729;</button>
                <button class="control" value="+">+</button>
                <button class="submit">=</button>
                  </li>
               </ul>
          </div>
       </div>
   </body>
   <script type="text/javascript" src="calculator.js"></script>
  </html>

JavaScript

function setEvent(evt, ele, callback) {
   var ele = getEle(ele);
    if (ele.length === undefined) {
    ele.addEventListener(evt, callback, false);        
    } else if(ele.length > 0) {
       for (var i=0; i<ele.length; i++) {
        ele[i].addEventListener(evt, callback, false);
    }
  }
  return false;
}

function getEle(ele) {
  var _idf = ele.charAt(0);
   if (_idf == "#") {
    var _ele = document.getElementById(ele.substr(1));
    return _ele;
  } else if(_idf == ".") {
    var _els = document.getElementsByClassName(ele.substr(1));
    return _els;
  }
  return ele;
 }

setEvent("click", ".input", function() { 
  console.log(this.value);
 });

setEvent("click", ".control", function() { 
  console.log(this.value);
 });

Original Q&A

There are 2 best solutions below

Barr J On 17 June 2015 at 07:04

You can print the values to the screen by using document.getElementById("number").innerHTML = this.value.

Notie that it is not jquery, when calling getElementById you don't do("#id") only ("id"), JavaScript will match the string with the desired Id.

In jquery, it is much like the behavior of css, so in order to find ID you don't do getElementById instead, you just do

//$ means jquery $("#id")

which is equivalent to java script's getElementById.

**Ajzz** · Accepted Answer

function setEvent(evt, ele, callback) {
    var ele = getEle(ele);
    if (ele.length === undefined) {
        ele.addEventListener(evt, callback, false);        
    } else if(ele.length > 0) {
        for (var i=0; i<ele.length; i++) {
            ele[i].addEventListener(evt, callback, false);
        }
    }
    return false;
    }

function getEle(ele) {
    var _idf = ele.charAt(0);
    if (_idf == "#") {
        var _ele = document.getElementById(ele.substr(1));
        return _ele;
    } else if(_idf == ".") {
        var _els = document.getElementsByClassName(ele.substr(1));
        return _els;
    }
    return ele;
    }

function getInnerHtml(id) {
     return document.getElementById(id).innerHTML;                   
   }
function getValue(elem) {
  return elem.value;
  }

setEvent("click", ".input", function() { 
  console.log(this.value);
  var _num = getInnerHtml("number");
  _num = _num + "" + getValue(this);
  document.getElementById("number").innerHTML = _num;
    });

setEvent("click", ".control", function() { 
  console.log(this.value);
  var _num1 = document.getElementById("number").innerHTML;
  _num1 = _num1 + "" + this.value;
  document.getElementById("number").innerHTML = _num1;
  });
setEvent("click", ".clear", function() { 
  console.log(this.value);
  var _num1 = document.getElementById("number").innerHTML;
  _num1 = "";
  document.getElementById("number").innerHTML = _num1;
  });
setEvent("click", ".submit", function() { 
  console.log(this.value);
   var _num1 = document.getElementById("number").innerHTML;
  _num1 = eval( _num1 + "" + getValue(this));
  document.getElementById("number").innerHTML = _num1;
  });

Hope this will work out.

Basic Calculator - event binding using pure JavaScript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DOM-EVENTS

Trending Questions

Popular # Hahtags

Popular Questions