I want to redirect user to a webpage when a button is clicked with a parameter comes from another function?

Question

I'm working on a course project which I'm really struggling. I tracked the clicks of the user on a set of images, this is the n variable of my program and the maximum click number is 3. I want to redirect the user to another webpage when a button is clicked and the webpage that I'll redirect will be determined by the n variable, 1 - 2 or 3. The user will be redirected different pages when a button is clicked in terms of the n variable. I'm attaching my code below, please help. I want to add that the index parameter in the increment function attached to the images in the html code. Increment function is working without a problem also. For example I tried the case when the n = 1 and user clicked the button.

function increment(index) {
        var n = 0;
        if (n < 3) {
            n++;
        }

        if (n == 1) {
            document.getElementById("gameButton").onclick = redirect (increment(index)) {
            location.href = "remaining8.html";
        }
   }

The second if statement crashed the whole program, now my increment function is not working also. What is the problem? — plshelpme, Dec 11 '18 at 21:41
Please don't use comments to add content to your post. Instead, edit your original post. — Jonathan Hamel, Dec 11 '18 at 22:00

score 2 · Answer 1 · answered Dec 11 '18 at 22:01

Once you redirect to the new page, you lose the value of "n" because you have loaded a whole new page.

You could open the url in a new tab/window in which case, I can suggest some coding. Or you could store the value of "n" in a cookie or localstorage, but yet again, different code.

You could also open these URLs in an iframe and then you would still be on the same page when you click it again.

what are you actually trying to do?

Bargros · Answer 2 · 2018-12-11T22:14:55.397

Your redirect() has already been declared and inside the second if block you're redeclaring it the wrong way. You don't want to check n==1 inside your increment function, you want to do it on the click event, like this:

document.getElementById("gameButton").onclick = () => {
   switch(n) {
      case 1:
         window.location.href = "remaining8.html";
         break;
      case 2: 
         // do something
         break;
      case 3: 
         // do something
         break;
}

But as for your Original request, I can't give you the right answer if I don't see your html. Post your html here and I'll post back with a solution.

Also instead of redirecting to another page, you could just open the new web page in a separate tab, that way you never loose n. Also I believe discarding that increment function and incrementing the value of n on the click event, is a better solution, the solution is below:

 var n = 0;

 document.getElementById("gameButton").onclick = function() {
    if(value == 3) {
      value = 1;
    } else if(value < 3) value++;

    switch(n) {
      case 1:
         window.location.href = "remaining8.html";
         break;
      case 2: 
         // do something
         break;
      case 3: 
         // do something
         break;
   }
}

score 0 · Answer 3 · answered Dec 11 '18 at 22:41

You could pass the n parameter along to the redirected page:

if (n == 1) {
    document.getElementById("gameButton").onclick = redirect (increment(index)) {
        location.href = "remaining8.html";
    }

Change the location.href to just pass the n variable ("remaining8.html?index=n") then on the redirect page it can acquire it and thus continue your increment process.

Here is a post about reading the url paramaters: How to get the value from the GET parameters?

Of course putting it in a cookie or localstorage would be most likely the best answer to keep your count across those page redirects since javascript can read cookies quite nicely.

I want to redirect user to a webpage when a button is clicked with a parameter comes from another function?

3 Answers3