Onclick event javascript not loading data in correct sequence

I am making a simple website which consists of products (Laptop, CCTV).it has only single page.i want when i click on (Laptop link in should display Laptop items stored in JSON and same case For CCTV products.

Problem.

  1. first time when i click on link it does not show anything when i click 2,3 times on link it show products.but preventdefualt not working.
    2.where should i apply preventDefault() event and how.

Here Is my HTML CODE For 2 links.

 <a
          href="displayproducts.html"
          onloadeddata="fetchproducts('CCTV')"
          ;
          >CCTV CAMERAS</a
        >
        <a
          href="displayproducts.html"
          onloadeddata="fetchproducts('Laptop')"
          >Laptop and COMPUTERS</a
        >

Here Is my js Code which handle that event and using AJAX AND JSON should return data(returning correctly).

function fetchproducts(product, event) {
  console.log(product);
  //your read json code

  var xhr = new XMLHttpRequest();
  xhr.open("get", "/jsondata/Products.json");

  xhr.onload = function (event) {
    console.log();
    event.preventDefault();
    var obj = JSON.parse(this.responseText);
    try {
      if (product === "CCTV") {
        fillProducts(obj.CCTV);
      } else if (product === "Laptop") {
        fillProducts(obj.Laptop);
      } else if (product == "Biometric") {
        fillProducts(obj.Biometric);
      }
    } catch (error) {
      console.log("some_error_occur");
    }
  };
  xhr.send();
}

@saleemsalik786, try replace this with xhr
like JSON.parse(xhr.responseText)

btw, what is the purpose of event after the product?