jquery - Javascript runs on page reload -

i'm using javascript edit url sort list generated none editable plugin in wordpress:

<script type="text/javascript"> var sortregex = /\[sort_by\]=\w*/; function pricehighz() {   location.href = location.href.replace('[sort_order]=asc', '[sort_order]=desc').replace(sortregex, '[sort_by]=price'); } function pricelowz() {   location.href = location.href.replace('[sort_order]=desc', '[sort_order]=asc').replace(sortregex, '[sort_by]=price'); } function datehighz() {   location.href = location.href.replace('[sort_order]=asc', '[sort_order]=desc').replace(sortregex, '[sort_by]=date'); } document.addeventlistener('domcontentloaded', function () {   document.getelementbyid('pricehighz').addeventlistener('click', pricehighz);   document.getelementbyid('pricelowz').addeventlistener('click', pricelowz);   document.getelementbyid('datehighz').addeventlistener('click', datehighz); }); </script> 

it works once page has loaded first time, , reload page. doesn't work on first load.

is there problem domcontentloaded, cause work once page reloaded?

i've looked @ this not sure how apply example code above.

you can use jquery .ready() event sure dom loaded before execution of script (like in link example). wordpress use jquery instead of alias $. using alias $ wordpress possible example adding var $ = jquery.noconflict(); :

<script type="text/javascript">  var $ = jquery.noconflict();  $(document).ready(function() {      var sortregex = /\[sort_by\]=\w*/;     function pricehighz() {         location.href = location.href.replace('[sort_order]=asc', '[sort_order]=desc').replace(sortregex, '[sort_by]=price');     }     function pricelowz() {         location.href = location.href.replace('[sort_order]=desc', '[sort_order]=asc').replace(sortregex, '[sort_by]=price');     }     function datehighz() {         location.href = location.href.replace('[sort_order]=asc', '[sort_order]=desc').replace(sortregex, '[sort_by]=date');     }     document.addeventlistener('domcontentloaded', function () {         document.getelementbyid('pricehighz').addeventlistener('click', pricehighz);         document.getelementbyid('pricelowz').addeventlistener('click', pricelowz);         document.getelementbyid('datehighz').addeventlistener('click', datehighz);     });  });  </script> 

you use jquery syntax instead of pure javascript replacing example in:
document.getelementbyid('datehighz')… replacing $('#datehighz')….