CodingForums.com - Stuck on a little Javascript project, could use a little help.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Stuck on a little Javascript project, could use a little help. (http://www.codingforums.com/showthread.php?t=275748)

Stuck on a little Javascript project, could use a little help.

Hey,

So I have been working on a little piece of Javascript and I have gotten a little stuck.

When I say that I have honestly tried for a couple hours but I can't seem to get anywhere with it...

I am writing a little selector script to allow a user to select multiple options and then create a url dependent on the options the user has selected.

Code:

<div onclick="generate_url('data input by php')">A button</div>

<div onclick="generate_url('different data)">A different button</div>



<div class="view_mode" onclick="change_mode('single')">Singular</div>

<div class="view_mode" onclick="change_mode('dual')">Dual</div>





<script>

var mode="single";

var count="0"; 



// Function to change view mode (working)

function change_mode(newmode)

{

mode = newmode;

count=0;

}



//Standard url that users selections are added to

var standard_url='http://www.mywebsite.com/page.php?id=';



// Function to generate a url or mutiple url's based off user input

function generate_url(selection)

{

//Allow user to choose a single option

        if (mode=='single')

        {        

                count++;

                var singular_url=standard_url+selection;

                if (count==1) 

                {

                        window.location.href = singular_url;

                }

        }





//Dual

        if (mode=='dual')

        {        

                if (count==0)

                {

                        var selection_1=selection;

                        count++;

                }

                if (count=1)

                {

                        var selection_2=selection;

                        count++;

                }

                if (count==2) 

                {

dual_url=selection_1+selection_2;

                        window.location.href = dual_url;

                }

        }

}



</script>

What should is if the user selects the first button then the second button after selecting dual view mode the javascript should load a url such as:

http://www.mywebsite.com/page.php?id...neselectiontwo

(I can go ahead and change out the final url myself that's not the problem)

The problem is to do with the count it automatically jumps through the script and adds the first selection twice then loads the page before you can select a second option.

I attempted to move around the if statements however this had no effect.

Could someone point me in the right direction

I went and changed some of the script around again.

So that the if(count==1) is above if(count==0).

What I now get is the url followed by:

undefinedandthedatafromselection2

The data from the first selection is not brought into the third if statement and then appended to the url.

Let's step through your code ... line by line. You can easily do that with pen & paper.

Please try to reproduce the steps

1 - Click single mode button ... so mode will be 'single'
2 - Oh, you initialize count with a string. Why? You should use this

Code:

var count = 0;

3 - Click on the first button. This method will be called

Code:

generate_url('data input by php')

so the first parameter "selection" of the method generate_url is 'data input by php'
4 - Inside generate_url() the first if statement will be true (because mode=='single'), so you go on with this part of the method
5 - You increase count by 1 ... so count == 1 now
6 - Now you add the "selection" to the url
7 - if count == 1 (this is true) you change window.location.href which results in an immediate page refresh

In 'dual' mode
4 - The first if will be false
5 - The second if will be true, because mode=='dual'
6 - count is still 0, so the first if will be true
7 - you copy "selection" to "selection_1" and increase count by 1 (so count == 1)
8 - the second if is true ... but IS STILL WRONG because you are using the assignment operator "=" instead of the comparison operator "==". This will set count to 1 and the result of the if condition is true
9 - you copy "selection" also to "selection_2" and increase count by 1 (so count == 2)
10 - The third if is also true because count==2, so you append both copies of "selection" to the url and immediately refresh the browser because you change window.location.href

Okay

So I changed a couple things and this is what I have got:

Code:

<div onclick="generate_url('data input by php')">A button</div>

<div onclick="generate_url('different data)">A different button</div>



<div class="view_mode" onclick="change_mode('single')">Singular</div>

<div class="view_mode" onclick="change_mode('dual')">Dual</div>





<script>

var mode="single";

var count = 0; 



// Function to change view mode (working)

function change_mode(newmode)

{

mode = newmode;

count=0;

}



//Standard url that users selections are added to

var standard_url='http://www.mywebsite.com/page.php?id=';



// Function to generate a url or mutiple url's based off user input

function generate_url(selection)

{

//Allow user to choose a single option

        if (mode=='single')

        {        

                count++;

                var singular_url=standard_url+selection;

                if (count==1) 

                {

                        window.location.href = singular_url;

                }

        }





//Dual

        if (mode=='dual')

        {        

                if (count==1)

                {

                        var selection_2=selection;

                        count++;

                }

                if (count==0)

                {

                        var selection_1=selection;

                        count++;

                }

                if (count==2) 

                {

dual_url=selection_1+selection_2;

                        window.location.href = dual_url;

                }

        }

}



</script>

So I fixed a couple of things, the count is now declared and assigned a variable not a string.

I also fixed the if(count==1) statement so it's not using an assignment.

I moved the if(count==1) statement above the if(count==0) statement so it would only activate the second time around.

Previously it would add the first user input twice into the url.

I am trying to get it so on the first click of one button it adds the first value dependent on what button the user clicked and on the second click it then adds a second user input and creates a url.

Which then javascript sends the user too.

I now have the problem where it creates the following url
mywebsite.com/whatever?id=undefined(SECOND INPUT)

It should give the following
mywebsite.com/whatever?id=(FIRST INPUT)(SECOND INPUT)

I think it's to do with the variables not being passed from one loop to the next.

I am really a Javascript newbie. If you could help me get this working I would much appreciate it.

With the "var" keyword you are declaring "selection_1" and "selection_2" as local variables to the method. Those local variables will be reinitialized with each call of the method.

If you omit the "var" keyword it should work better.