How should I code this jQuery code in Javascript?

Question

This exercise I need a function that moves the div randomly inside of the body when I click with the left button mouse.

I'm having some difficulties to swap this code(jquery) into javascript. How would it be?

var counter = 0;
var div = document.getElementsByClassName('a');

function click() {
  if (counter < 1) {
    var pos = makeNewPosition();
    this.style.left = pos[1] + 'px';
    this.style.top = pos[0] + 'px';
  }
}

function makeNewPosition() {

  // Get viewport dimensions (remove the dimension of the div)
  var h = window.innerHeight = -50;
  var w = window.innerWidth = -50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

<div onclick="click()" class="a">Click</div>

This is the jQuery that I wanted to code in javascript.

$(document).ready(function(){

var counter = 0;

    $('.a').click( function () {
        if (counter < 1 ) {
            var pos =  makeNewPosition();
            this.style.left = pos[1] +'px';
            this.style.top  = pos[0] +'px';
        }
    });
});

function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

Answer 1

JavaScript:

window.addEventListener("load", function() {
  var counter = 0,
    div = document.querySelector(".a");

  div.addEventListener("click", function() {
    if (counter < 1) {
      var pos = makeNewPosition();
      this.style.left = pos[1] + 'px';
      this.style.ltop = pos[0] + 'px';
    }
    counter++;
  });
});

function makeNewPosition() {

  // Get viewport dimensions (remove the dimension of the div)
  var h = window.innerHeight -50;
  var w = window.innerWidth  -50;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

.a {
  position: absolute;
  top: 100;
  left: 100
}

<div class="a">Click</div>

Based on this jQuery:

$(function() {

  var counter = 0;

  $('.a').click(function() {
    if (counter < 1) {
      var pos = makeNewPosition();
      $(this).css({
        "left": pos[1] + 'px',
        "top": pos[0] + 'px'
      });
    }
    counter++;
  });
});

function makeNewPosition() {

  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

.a {
  position: absolute;
  top: 100;
  left: 100
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">Click</div>

Answer 2

The most idiomatic way would be to first get a reference to the element

const div = document.getElementsByClassName('a')[0];

then add an event listener to the element

div.addEventListener('click', click); //Attach your handler function to the event