I've got almost no experience with Javascript and I need make a "calculator" type website. This is the part of the code that is suppose to calculate, but it only adds values together instead of calculating them.
I was told parseInt will fix this, but due to my inexperience I can't find how to do so through Google.
Any help is appreciated and explenations are welcome. Thanks!
function izracunaj() {
const st1 = document.getElementById("prvoStevilo").value;
//določim konstantno ki bo pridobila informacije iz polja kjer smo določili id
const st2 = document.getElementById("drugoStevilo").value;
const operacija = document.getElementById("operacija").value;
let rezultat;
switch (operacija) {
//v oklepaje vpišemo operacija, saj to preverjamo
case '+':
rezultat = st1+st2;
break;
//podatki se skranijo v rezultat
case '-':
rezultat = st1-st2;
break;
case '*':
rezultat = st1*st2;
break;
case '/':
rezultat = st1/st2;
break;
}
document.getElementById("rezultat").value = rezultat;
}<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<script src="javascript.js"></script>
</head>
<body>
<h1>Kalkulator</h2>
<form>
Prvo število: <br>
<input type="text" id="prvoStevilo"> <br>
Drugo število: <br>
<input type="text" id="drugoStevilo"> <br>
Operacija: <br>
<input type="text" id="operacija"> <br>
Rezultat: <br>
<input type="text" id="rezultat" disabled="true"> <br>
<br><br>
<input type="button" value="Izračunaj" onclick="izracunaj()">
</form>
</body>
</html>When you use .value then it will give you the value of type string. All you have to do is either use parseInt or use + to convert it into number type
parseInt(document.getElementById("prvoStevilo").value, 10);
or
+document.getElementById("prvoStevilo").value;
or
Number(document.getElementById("prvoStevilo").value);
function izracunaj() {
const st1 = parseInt(document.getElementById("prvoStevilo").value); // change
//določim konstantno ki bo pridobila informacije iz polja kjer smo določili id
const st2 = +document.getElementById("drugoStevilo").value; // change
const operacija = document.getElementById("operacija").value;
let rezultat;
switch (operacija) {
//v oklepaje vpišemo operacija, saj to preverjamo
case '+':
rezultat = st1 + st2;
break;
//podatki se skranijo v rezultat
case '-':
rezultat = st1 - st2;
break;
case '*':
rezultat = st1 * st2;
break;
case '/':
rezultat = st1 / st2;
break;
}
document.getElementById("rezultat").value = rezultat;
}<h1>Kalkulator</h2>
<form>
Prvo število: <br>
<input type="text" id="prvoStevilo"> <br> Drugo število: <br>
<input type="text" id="drugoStevilo"> <br> Operacija: <br>
<input type="text" id="operacija"> <br> Rezultat: <br>
<input type="text" id="rezultat" disabled="true"> <br>
<br><br>
<input type="button" value="Izračunaj" onclick="izracunaj()">
</form>You could also let javascript evaluate the equation for you using Function. I multiply the first two arguments by 1 to force them to either NaN or numeric values, and limit the operator to the four values in the regex in order to sanitize the inputs, then combine the arguments into a string with a template literal.
function izracunaj() {
const st1 = document.getElementById("prvoStevilo").value*1;
const st2 = document.getElementById("drugoStevilo").value*1;
const operacija = document.getElementById("operacija").value;
if(!/[+-/*]/.test(operacija)) { return; }
let formula = `return ${st1}${operacija}${st2}`;
let rezultat = new Function(formula);
document.getElementById("rezultat").value = rezultat();
}<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<script src="javascript.js"></script>
</head>
<body>
<h1>Kalkulator</h2>
<form>
Prvo število: <br>
<input type="text" id="prvoStevilo"> <br>
Drugo število: <br>
<input type="text" id="drugoStevilo"> <br>
Operacija: <br>
<input type="text" id="operacija"> <br>
Rezultat: <br>
<input type="text" id="rezultat" disabled="true"> <br>
<br><br>
<input type="button" value="Izračunaj" onclick="izracunaj()">
</form>
</body>
</html>