[制作基于HTML的计算器时如何在javascript中显示计算历史记录

问题描述 投票:0回答:1

我试图制作一个基于HTML的计算器,它还显示了以前的计算历史记录,但我对如何执行此操作感到困惑。如何将以前的计算结果存储为字符串,以便以后使用?嗨,我试图制作一个基于HTML的计算器,它还显示了以前的计算历史记录,但是我对如何执行此操作感到困惑。如何将先前的计算结果存储为字符串,以便以后使用?

<html> 
   <head> 
      <script> 
         //function that display value 
         function dis(val) 
         { 
             document.getElementById("result").value+=val 
         } 

         //function that evaluates the digit and return result 
         function solve() 
         { 
             let x = document.getElementById("result").value 
             let y = eval(x) 
             document.getElementById("result").value = y 
         } 

         //function that clear the display 
         function clr() 
         { 
             document.getElementById("result").value = "" 
         } 
      </script> 
      <!-- for styling -->
      <style> 
         .title{ 
         margin-bottom: 10px; 
         text-align:center; 
         width: 175px; 
         color:grey; 
         border: solid black 2px; 
         } 

         input[type="button"] 
         { 
         background-color:grey; 
         color: black; 
         border: solid black 2px; 
         width:100% 
         } 

         input[type="text"] 
         { 
         background-color:white; 
         border: solid black 2px; 
         width:100% 
         } 
      </style> 
   </head> 
   <!-- create table -->
   <body> 
      <div class = title >ITP2 Calculator</div> 
      <table border="1"> 
         <tr> 
            <td colspan="3"><input type="text" id="result"/></td> 
            <!-- clr() function will call clr to clear all value -->
         </tr> 
         <tr> 
            <!-- create button and assign value to each button -->
            <!-- dis("1") will call function dis to display value -->
            <td><input type="button" value="1" onclick="dis('1')"/> </td> 
            <td><input type="button" value="3" onclick="dis('3')"/> </td> 
            <td><input type="button" value="+" onclick="dis('+')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="5" onclick="dis('5')"/> </td>  
            <td><input type="button" value="7" onclick="dis('7')"/> </td> 
            <td><input type="button" value="/" onclick="dis('')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="9" onclick="dis('9')"/> </td> 
            <td><input type="button" value="Clr" onclick="clr()"/> </td>
            <td><input type="button" value="=" onclick="solve()"/> </td>   
         </tr> 
      </table> 
   </body> 
</html>  

显示历史记录的示例:2 + 3 = 53 + 5 = 8

javascript html
1个回答
0
投票

您可以创建一个将数据保存到某个变量的函数,然后每当您想向历史记录中添加内容时就调用该函数。这是一个例子:

let history = '';

function addToHistory(value) {
    history += value;
    document.getElementById('history').innerText = history;
}

function dis(val) {
    // your code...

    addToHistory(val);
}

function solve() {
    // your code...

    addToHistory('=' + y);
}

function clr() {
    // your code...

    addToHistory(' ');
}

您可以在这里查看其工作方式:JSFiddle

© www.soinside.com 2019 - 2024. All rights reserved.