Uncaught TypeError: Cannot read property 'on' of null [duplicate]

Answer 1

The problem is with $. Your $ is getting conflict with jQuery and prototypejs.

Whenever you write jQuery code, try using self invocation function with jQuery as parameter.

for Ex.

(function($){//You can use any character instead $ here.
//Your code here to use $. 
})(jQuery);

or another way is use jQuery word instead of $.

for Ex.

jQuery('.addtocart').on('click', function(){
  //Your code here.
});

In your code, $ is used by prototype, $('.addtocart') is returning null as there are no elements with class .addtocart when this script gets executed. and thats why it is throwing error while accessing on of null*($('.addtocart'))*.

If you want to add eventhandler with jquery Only. then use jQuery word instead $.

//when add to cart link is clicked...
jQuery('.addtocart').on('click', function(){

  //get the value of the "data-value" attribute for that link
  var vehicleRegistration = jQuery(this).data('value');
  //save it to localStorage
  localStorage.setItem('vehicleRegistration', vehicleRegistration);


  //read from localStorage
  if( localStorage.getItem('vehicleRegistration') ){
    //add the value to the form input
    jQuery('#field34').val( localStorage.getItem('vehicleRegistration') );
  }

});

Answer 2

In your site, you have both prototype.js and jQuery added. The $ here calls prototype.js instead of jQuery. So instead of that code, please change it to:

jQuery('.addtocart').on('click', function(){

  //get the value of the "data-value" attribute for that link
  var vehicleRegistration = jQuery(this).data('value');
  //save it to localStorage
  localStorage.setItem('vehicleRegistration', vehicleRegistration);


  //read from localStorage
  if( localStorage.getItem('vehicleRegistration') ){
    //add the value to the form input
    jQuery('#field34').val( localStorage.getItem('vehicleRegistration') );
  }

});

Or you can also do this:

(function ($) {
    $('.addtocart').on('click', function(){

      //get the value of the "data-value" attribute for that link
      var vehicleRegistration = $(this).data('value');
      //save it to localStorage
      localStorage.setItem('vehicleRegistration', vehicleRegistration);


      //read from localStorage
      if( localStorage.getItem('vehicleRegistration') ){
        //add the value to the form input
        $('#field34').val( localStorage.getItem('vehicleRegistration') );
      }

    });
})(jQuery);