How to implement a simple calculator function using JavaScript?

How to use JavaScript to implement a simple calculator function?

The calculator is one of the commonly used tools in our daily life. It can be used to perform simple mathematical operations. Today, we will implement a simple calculator function using JavaScript. In this article, I'll show you how to write code using JavaScript to implement basic math operations and a calculator interface.

First, we need to create an HTML file that contains a text box, number buttons, and operator buttons for displaying the results of the operation. The following is the basic HTML structure:

     
   
 1 2 3 + 
 4 5 6 - 
 7 8 9 * 
 0 . = / 
 清空  

In the above HTML code, we use a text box (id is "result") to display the result of the operation, and add number buttons, operator buttons and clear button. Each button has an onclick event, which calls a JavaScript function namedbuttonClickto handle button click events.

Next, we need to write the implementation of thebuttonClickandclearResultfunctions in a JavaScript file. The following is a sample code:

function buttonClick(value) { var result = document.getElementById("result"); if (value === '=') { result.value = eval(result.value); // 使用 eval 函数计算表达式 } else { result.value += value; } } function clearResult() { document.getElementById("result").value = ""; }

In thebuttonClickfunction, we first obtain the reference to the text box through thegetElementByIdmethod, and then perform different processing based on the value of the button . If the button's value is the equal sign (=), we will use theevalfunction to evaluate the expression and display the result in the text box. Otherwise, we append the button's value to the text box's content.

clearResultThe function simply sets the value of the text box to an empty string, realizing the clearing function.

Now, you can save the above HTML code and JavaScript code to the corresponding files and open the HTML file in the browser. You'll see a simple calculator interface that allows you to perform basic mathematical operations.

This is just a simple calculator example, which only implements the basic four arithmetic functions. If you want to implement more complex calculator functions, such as supporting brackets, trigonometric functions, etc., you need to further improve the code. But with this example, you can see how to use JavaScript to implement a simple calculator function.

I hope this article can help you, and I wish you happy programming!

The above is the detailed content of How to implement a simple calculator function using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!