2015-06-19 5 views
0

Я разработал калькулятор с HTML, CSS, Javascript. Вот источник:Как сделать функцию истории калькулятором. В javascript

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>

Я хочу, чтобы добавить функцию истории нижней части моего calculator.When я вычислить то, что я хочу, чтобы сохранить его нижнюю часть моего калькулятора или где-то еще. Я хочу, чтобы это было с Javascript. Как я могу это сделать? История должна выглядеть так: 2+2=4

+0

вы пытались решить ее самостоятельно первым? Если да, отправьте то, что вы пробовали. – Banana

+0

Возможно, вы можете использовать sessionStorage или даже отслеживать вычисления в массиве. – Varun

+0

Как я могу это сделать? Я начинаю программировать. Я изучаю –

ответ

0

Прежде всего, вам нужно использовать правильный html. список пользователей <ul> может содержать только элементы списка <li> в качестве прямых детей. если вам не нравится результат, просто создайте элементы списка или не используйте списки пользователей.

Во-вторых, если вам нужно сохранить историю просто добавить значение текстового поля в истории элемента до оценки формулы в ней:

* Третье: я бы посоветовал против использования eval(), как его поведение непредсказуемо и могут быть скомпрометированы. лучше проанализировать формулу и обработать вычисления с помощью предопределенных функций.

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>

+0

Спасибо! Оно работает –