How do I incorporate parseInt into this code?-CodePudding

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>

CodePudding user response：

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);

 document.getElementById("prvoStevilo").value;

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>

CodePudding user response：

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>