1

I want to make button witch run function (Price List filter) after new page is loaded. How to do that (in Javascript)?

Let's say I have button like this:

var faceButton = document.getElementById('faceButton');

faceButton.addEventListener('click', function () {
            window.location.href = '/pricelist.html';
            window.onload = function () {
                facePrizes();
            }
        });

function facePrizes(){
   document.getElementById('nose').style.display = 'block';
   document.getElementById('eyes').style.display = 'block';
   document.getElementById('arm').style.display = 'none';
   document.getElementById('leg').style.display = 'none';
}

After clicking on faceButton I want to go to prizes.html file and run facePrizes() after page it's load

Michal Zareba
  • 36
  • 5
  • You can't do that with arbitrary functions that would be a security risk. You can however pass parameters using the url – IT goldman Nov 13 '22 at 00:12
  • What do you mean? To clarify: you wish to load a new page, and once the new page is loaded, you want to run a function. – Paxon Kymissis Nov 13 '22 at 01:40
  • @PaxonKymissis Yes this is exactly what I'm trying to do – Michal Zareba Nov 13 '22 at 06:09
  • @ITgoldman I know that I can pass parameters with #, on this page pricelist.html I have buttons that are running this functions. Can I somehow pass id of button and make it active? – Michal Zareba Nov 13 '22 at 06:15
  • you can use querystring parameter rather than hash paramter. `example.com?btn=btn12`. there are some functions to get that value you can find – IT goldman Nov 13 '22 at 12:18

1 Answers1

1

So I manage to find a solution :) I've added querystring to link -> if link is correct run function
Working code:

var faceButton = document.getElementById('faceButton');

faceButton.addEventListener('click', function () {
            window.location.href = '/pricelist/?face';
        });

if (window.location.href == "http:/example.com/pricelist/?face") {
    facePrizes();
}

function facePrizes(){
   document.getElementById('nose').style.display = 'block';
   document.getElementById('eyes').style.display = 'block';
   document.getElementById('arm').style.display = 'none';
   document.getElementById('leg').style.display = 'none';
}
Michal Zareba
  • 36
  • 5
  • great but the detection of the querystring parameter `face` is a little shaky. try to use a function like in [this answer](https://stackoverflow.com/a/2091331/3807365) – IT goldman Nov 13 '22 at 21:31
  • @ITgoldman ok thanks - I will try it tomorrow, now it's time to sleep. Your tip about querystring was very helpful – Michal Zareba Nov 13 '22 at 23:02