Im a beginner and i tried to make a calculator in js. im having trouble with outputs

Question

function calc() {
  var a = parseFloat(document.querySelector("#value1").value);
  var b = parseFloat(document.querySelector("#value2").value);
  var op = document.querySelector("#operator").value;
  var calculate;




  if (op == "add") {
    calculate = a + b;
  } else if (op == "min") {
    calculate = a - b;

  } else if (op == "mul") {
    calculate = a * b;

  } else if (op == "div") {
    calculate = a / b;

  }

  document.querySelector("#result").innerHTML = calculate;

}

 Value 1: <input type = "text" id = "value 1" >
        Value 2: <input type = "text" id = "value 2">
        
        Operator:
        <select id = "operator" >
            <option value="add">Add</option>
            <option value="min">Minus</option>
            <option value="mul">Multiply</option>
            <option value="div">Divide</option>
        </select>
        <button type = "button" onclick="calc()" >Calculate </button>
    </form>
    <div id = "result"> </div>

there are no errors shown but it isnt working and the output doesnt appear

Answer 1

I think Levi's code is doing well. Just a little bit wrapping error. And id "value 1" is not equal to id "value1", you can change both into "value1".

var a, b ,op, calculate;

function calc(){
    a = parseFloat(document.querySelector("#value1").value);
    b = parseFloat(document.querySelector("#value2").value);
    op = document.querySelector("#operator").value;
    
    if (op == "add") {  calculate = a + b; }
    else if (op == "min") { calculate = a - b; }
    else if (op == "mul") { calculate = a * b; }
    else if (op == "div") { calculate = a / b; }
    console.log(calculate);

        document.querySelector("#result").innerHTML=calculate;
}

Calculator

    Value 1: <input type = "text" id = "value1" >
    Value 2: <input type = "text" id = "value2">
    
    Operator:
    <select id = "operator" >
        <option value="add">Add</option>
        <option value="min">Minus</option>
        <option value="mul">Multiply</option>
        <option value="div">Divide</option>
    </select>
    <button type = "button" onclick="calc()" >Calculate </button>

<div id = "result"> </div>