How to check mouse coordinates and mouse events

Question

I'm building a simple game where if the mouse's X coordinate is greater than 200, and you click, the screen will turn red. Here's the code:

var mouseX = event.clientX;
var mouseY = event.clientY;

function startGame(){
 if(mouseX > 200){
  document.body.style.backgroundColor = "red";
 }
}
document.addEventListener("onmousedown", startGame);

Am I using an incorect way of finding coordinates or am i using an incorrect way of finding mouse down or what? I can't use Jquery btw.

Answer 1

The event should be "mousedown", not "onmousedown". Also, you need to put an event parameter inside your startGame function and declare your variables inside it. Try this:

function startGame(event){

  var mouseX = event.clientX;
  var mouseY = event.clientY; 

  if(mouseX > 200){
    document.body.style.backgroundColor = "red";
  }
}
document.addEventListener("mousedown", startGame);

https://jsfiddle.net/a7pn0seb/1/