How to make history feature to calculator. In javascript

Question

How to make history feature to calculator. In javascript

2.3k Views Asked by Nodari Kobaxidze At 02 April 2025 at 22:41

I have developed Calculator with HTML, CSS, Javascript. Here is source:

function c(val)
{
    document.getElementById("chasaweriveli").value=val;
}
function v(val)
{
    document.getElementById("chasaweriveli").value+=val;
}
function e()
{
    try
    {
        c(eval(document.getElementById("chasaweriveli").value))
    }
    catch(e)
    {
        c('Error')
    }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator By Gh0st</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
<ul>
  <input id="chasaweriveli" type="text" size="10" readonly=""/>
  <input type="button" value="C" onclick="c(&quot;&quot;)" class="btn btn-warning"/>
</ul>
<ul>
  <input type="button" value="7" onclick="v(&quot;7&quot;)" class="btn btn-info"/>
  <input type="button" value="8" onclick="v(&quot;8&quot;)" class="btn btn-info"/>
  <input type="button" value="9" onclick="v(&quot;9&quot;)" class="btn btn-info"/>
  <input type="button" value="+" onclick="v(&quot;+&quot;)" class="btn btn-success"/>
</ul>
<ul>
  <input type="button" value="4" onclick="v(&quot;4&quot;)" class="btn btn-info"/>
  <input type="button" value="5" onclick="v(&quot;5&quot;)" class="btn btn-info"/>
  <input type="button" value="6" onclick="v(&quot;6&quot;)" class="btn btn-info"/>
  <input type="button" value="-" onclick="v(&quot;-&quot;)" class="btn btn-success"/>
</ul>
<ul>
  <input type="button" value="1" onclick="v(&quot;1&quot;)" class="btn btn-info"/>
  <input type="button" value="2" onclick="v(&quot;2&quot;)" class="btn btn-info"/>
  <input type="button" value="3" onclick="v(&quot;3&quot;)" class="btn btn-info"/>
  <input type="button" value="*" onclick="v(&quot;*&quot;)" class="btn btn-success"/>
</ul>
<ul>
  <input type="button" value="0" onclick="v(&quot;0&quot;)" class="btn btn-info"/>
  <input type="button" value="Equals" onclick="e()" class="btn btn-danger"/>
  <input type="button" value="/" onclick="v(&quot;/&quot;)" class="btn btn-success"/>
</ul>
  </body>
</html>

I want to add history feature bottom of my calculator.When I'll calculate something I want to save it bottom of my calculator or somewhere else. I want to o it with Javascript. How I can do that? History must look like this 2+2=4

Original Q&A

There are 1 best solutions below

**Banana** · Answer 1

First of all, you need to use proper html. a user list <ul> can only contain list items <li> as direct children. if you dont like the result, simply style the list items or dont use user lists.

Second, if you need to keep history just append the value of the textbox to the history element prior to evaluating the formula in it:

*Third:i would advise against using eval() as its behavior is unpredictable and can be compromised. better parse the formula and process the calculations via predefined functions.

function c(val) {
    document.getElementById("chasaweriveli").value = val;
}

function v(val) {
    document.getElementById("chasaweriveli").value += val;
}

function e() {
    try {
        var Formula = document.getElementById("chasaweriveli").value;
        var Result =eval(Formula);
        c(Result)

        document.getElementById("History").innerHTML += Formula +"="+Result + "<br/>";
    } catch (e) {
        c('Error')
    }
}

ul li {
     display: inline-block;
     list-style-type: none;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul>
    <li>
        <input id="chasaweriveli" type="text" size="10" readonly="" />
    </li>
    <li>
        <input type="button" value="C" onclick="c(&quot;&quot;)" class="btn btn-warning" />
    </li>
</ul>
<ul>
    <li>
        <input type="button" value="7" onclick="v(&quot;7&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="8" onclick="v(&quot;8&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="9" onclick="v(&quot;9&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="+" onclick="v(&quot;+&quot;)" class="btn btn-success" />
    </li>
</ul>
<ul>
    <li>
        <input type="button" value="4" onclick="v(&quot;4&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="5" onclick="v(&quot;5&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="6" onclick="v(&quot;6&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="-" onclick="v(&quot;-&quot;)" class="btn btn-success" />
    </li>
</ul>
<ul>
    <li>
        <input type="button" value="1" onclick="v(&quot;1&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="2" onclick="v(&quot;2&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="3" onclick="v(&quot;3&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="*" onclick="v(&quot;*&quot;)" class="btn btn-success" />
    </li>
</ul>
<ul>
    <li>
        <input type="button" value="0" onclick="v(&quot;0&quot;)" class="btn btn-info" />
    </li>
    <li>
        <input type="button" value="Equals" onclick="e()" class="btn btn-danger" />
    </li>
    <li>
        <input type="button" value="/" onclick="v(&quot;/&quot;)" class="btn btn-success" />
    </li>
</ul>
<ul>
    <li id="History"><h3>History:</h3></li>
</ul>

How to make history feature to calculator. In javascript

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in CALCULATOR

Trending Questions

Popular # Hahtags

Popular Questions