Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Calculator</title> </head> <body> <p>Add any arithmetic expression like 12 + 5 and hit 'Calculate' button!</p> <div> <input type="text" id="expression" placeholder="Enter expression"> <!-- User input field --> <button onclick="evaluateExpression()">Calculate</button> <!-- Button to trigger calculation --> </div> <div id="calcResult"></div> <!-- Element to display result --> <script> function evaluateExpression() { const expression = document.getElementById('expression').value; // Get user input try { const result = eval(expression); // Evaluate the expression document.getElementById('calcResult').textContent = `Result: ${result}`; // Display the result } catch (e) { document.getElementById('calcResult').textContent = 'Invalid expression'; // Handle invalid input } } </script> </body> </html>