CODEWITHSUNDEEP
javascript
Demetrius
Demetrius

Reputation: 1

Simple Javascript error that is driving me insane

This is driving me nuts. I have put the html and javaScript code below. Whenever I refresh my page I get Uncaught TypeError: screen.addEventListener is not a function. I insert any other variable or ID for screen and it works fine.

HTML Code

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="css/reset/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="calculator">
        <div id="screen">
        </div>
        <div id="layout">
            <ul id="first-row" class="btn-row">
                <li><button>C</button></li>
                <li><button>=</button></li>
            </ul>
            <ul id="sec-row" class="btn-row">
                <li><button>7</button></li>
                <li><button>8</button></li>
                <li><button>9</button></li>
                <li><button>+</button></li>
            </ul>
            <ul id="third-row" class="btn-row">
                <li><button>4</button></li>
                <li><button>5</button></li>
                <li><button>6</button></li>
                <li><button>-</button></li>
            </ul>
            <ul id="fourth-row" class="btn-row">
                <li><button>1</button></li>
                <li><button>2</button></li>
                <li><button>3</button></li>
                <li><button>*</button></li>
            </ul>
            <ul id="fifth-row" class="btn-row">
                <li><button>0</button></li>
                <li><button>/</button></li>
            </ul>
        </div>
    </div>
    <script src="js/app.js">
    </script>
</body>
</html>

JavaScript Code

var screen = document.getElementById('screen');
var btn = document.getElementsByTagName('button');
var clear = btn[0];
var equals = btn[1];
var seven = btn[2];

clear.addEventListener('click', here);
screen.addEventListener('click', function(){
    alert('wth');
});

Upvotes: 0

Views: 292

Answers (1)

epascarello
epascarello

Reputation: 207501

You have a naming issue. It is clashing with the window.screen object

console.log(window.screen);

MDN window.screen

Rename the variable to something else and it works fine.

var screenX = document.getElementById("screen");
screenX.addEventListener("click", function() { alert("x"); });
<div id="screen">Click</div>

or take it out of global scope

(function () {
    var screen = document.getElementById("screen");
    screen.addEventListener("click", function() { alert("x"); });
}());
<div id="screen">Click</div>

Upvotes: 2

Related Questions