I want to make a calculator, that can calculate normal, but also can calculate eqasions with x, such as 2*x=8 and then gives ,4 or x=4 as an answer. The calculation works, but the part doesnt.
I think the problem somehow is that it doest recognice if “x” is in the input in the function calculate(). I just startet coding and i have used gpt-4o tbh to add the equasion feature, but it doesnt work and chat gpt also dont know why. This is my code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taschenrechner</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#calculator {
border: 5px solid #ccc;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#eingabe {
width: 100%;
font-size: 24px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
.button {
width: 20%;
padding: 20px;
margin: 1%;
font-size: 18px;
border: none;
background-color: #264d37;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
.button:hover {
background-color: #ddd;
}
.button.special {
background-color: #ffcc00;
}
.button.empty {
background-color: #fff;
}
.button.special:hover {
background-color: #ffdd55;
}
.button.red {
background-color: #ff0000;
color: #fff;
}
.button.red:hover {
background-color: #ff5555;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const eingabe = document.getElementById("eingabe");
const buttons = Array.from(document.querySelectorAll(".button"));
const variables = {};
buttons.forEach(button => {
button.addEventListener("click", () => {
const value = button.dataset.value;
if (value === "calc") {
calculate();
} else if (value === "C") {
eingabe.value = "";
}
else if (value === "del") {
eingabe.value = eingabe.value.substring(0, eingabe.value.length - 1);
} else if (value === "CA") {
clearAll();
} else {
eingabe.value += value;
}
});
});
eingabe.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
calculate();
}
});
function calculate() {
try {
const input = eingabe.value;
if (input.includes("x")) {
eingabe.value = solveEquation(input);
} else {
let result = evaluateExpression(input);
eingabe.value = result;
}
} catch (e) {
eingabe.value = "Error";
}
}
function clearAll() {
eingabe.value = "";
for (let key in variables) {
delete variables[key];
}
}
function evaluateExpression(input) {
input = input.replace(/s+/g, ''); // Entfernt alle Leerzeichen
input = input.replace(/(d+)!/g, (match, number) => {
return factorial(parseInt(number));
});
input = input.replace(/(d+)√(d+)/g, (match, index, radicand) => {
return Math.pow(parseInt(radicand), 1 / parseInt(index));
});
for (const [varName, varValue] of Object.entries(variables)) {
const varRegex = new RegExp(`\b${varName}\b`, 'g');
input = input.replace(varRegex, varValue);
}
return eval(input);
}
function factorial(n) {
return n === 0 ? 1 : n * factorial(n - 1);
}
function solveEquation(equation) {
const sides = equation.split('=');
if (sides.length !== 2) {
eingabe.value = "Fehler";
return;
}
let [leftSide, rightSide] = sides;
const variableMatch = /([a-zA-Z])/.exec(leftSide + rightSide);
if (!variableMatch) {
eingabe.value = "Fehler";
return;
}
const variable = variableMatch[1];
const solver = (left, right) => {
return (evaluateExpression(right) - evaluateExpression(left)) / (evaluateExpression(left.replace(variable, '1')) - evaluateExpression(left.replace(variable, '0')));
};
const solution = solver(leftSide, rightSide);
if (typeof solution === 'number') {
variables[variable] = solution;
eingabe.value = `${variable} = ${solution}`;
} else {
eingabe.value = "Fehler";
}
}
});
</script>
</head>
<body>
<div id="calculator">
<input type="text" id="eingabe" placeholder="Rechnung">
<div class="button-container">
<button class="button" data-value="1">1</button>
<button class="button" data-value="2">2</button>
<button class="button" data-value="3">3</button>
<button class="button special" data-value="del">⌫</button>
<button class="button" data-value="4">4</button>
<button class="button" data-value="5">5</button>
<button class="button" data-value="6">6</button>
<button class="button special" data-value="C">C</button>
<button class="button" data-value="7">7</button>
<button class="button" data-value="8">8</button>
<button class="button" data-value="9">9</button>
<button class="button special" data-value="calc">=</button>
<button class="button" data-value="0">0</button>
<button class="button" data-value="(">(</button>
<button class="button" data-value=")">)</button>
<button class="button special" data-value="CA">CA</button>
<button class="button" data-value="!">!</button>
<button class="button" data-value="2√">√</button>
<button class="button" data-value="+">+</button>
<button class="button" data-value="-">-</button>
<button class="button" data-value="*">x</button>
<button class="button" data-value="/">÷</button>
<button class="button" data-value="**">x^y</button>
<button class="button empty" data-value=""></button>
</div>
</div>
</body>
</html>`
New contributor
hhhhhhhh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.