Can’t press the button on html page log errors "Uncaught TypeError: Cannot read property ‘addEventListener’ of null"

  html, javascript

I tried to learn some basic of different about JS and TS but when I code basic HTML and JS for plus 2 number (first of all I didn’t expect it can add for Ex. 10 + 2 = 12 I just expect 102).
But when I opened my html file for test my script console thrown this error

Uncaught TypeError: Cannot read property ‘addEventListener’ of null

So, I can’t press add button too here my HTML code

const button = document.querySelector("button1");
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

function add(num1, num2) {
    if ( typeof num1 === "number" && typeof num2 === "number") {
        return num1 + num2;

    } else {
        return +num1 + +num2;
    }
}

button.addEventListener("click", function() {
    consolg.log(add(input1.value, input2.value));
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Understanding Typescript</title>
    <script src="js-only.js" defer></script>
</head>
<body>
    <input type="number" id="num1" placeholder="number1">
    <input type="number" id="num2" placeholder="number2">
    <button>Add!</button>
</body>
</html>

Can you tell me what are my mistakes?

Source: Ask Javascript Questions

LEAVE A COMMENT