Solution 1 :

You have not assigned a class- or id-name with ‘operator’, so it can not find that element.

Problem :

I’m making a calculator. Inspector tells me it cannot read the property of value at Line 4 of my JS.

I’ve gone through line by line and I can’t figure out what I’m doing wrong.
I am following this tutorial from mmtutus on YouTube.

I’ve gone through each line and my code is identical to his.

function calc() {
  var a = parseInt(document.querySelector("#value1").value);
  var b = parseInt(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 == "div") {
    calculate = a / b;
  } else if (op == "mul") {
    calculate = a * b;

  document.querySelector("#result").innerHTML = calculate;
<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

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

<script src="main.js"></script>


Could you help me to find the root of my issue?


Comment posted by VLAZ


Comment posted by EugenSunic

var op = document.querySelector("#value2").value;

Comment posted by Barmar

You need

Comment posted by EugenSunic

@Barmar did you just watch that youtube video?

Comment posted by Barmar

It’s at 05:00 in the video