Changing a global variable to a window.prompt() variable within a .click function in javascript

Question

I'm currently working on The Odin Project's first project in their curriculum.

For step 4, I am trying to create a window.prompt() that will ask the user for a new number to assign to a pre-existing global variable like so:

var gridSize;
var gridAmount;

    if (gridAmount === "", null, undefined, false || gridAmount < 1 ||gridAmount > 64 || isNaN(gridAmount)){
            var gridSize = 16;
        } else {
            var gridSize = gridAmount;
        };

    function grid() {

        for (var x = 0; x < gridSize; x++) {
            $('#container').append("<div class='grid'></div>");
            $('.grid').height(800 / gridSize);
        };
        for (var x = 0; x < gridSize; x++) {
            $('.grid').append("<div class='row'></div>")
            $('.row').width(800 / gridSize);
            $('.row').height(800 / gridSize);
        };
    };

    $('#reset-squares').click(function(){
        location.reload(true);
        var gridAmount = window.prompt("From 1 to 64, what is your grid's parameters (00 x 00)?");
    });

What I am trying to do is reset the page, then assign the variable gridAmount to a new number defined in the .click() function. Am I missing something? Is this unachievable with the current code structure?

Here's a demo

Thanks in advance!

score 1 · Answer 1 · answered Mar 28 '16 at 00:45

1

Take the var in front of gridAmount out of the function.

The first var gridAmount is creating a global variable. If you assign a new value to it in the function, it will update the global variable.

Adding the var in the function creates a variable local to the function with the same name, so the global variable is not updated.

Also checkout jQuery's .empty and .destroy methods. They will allow you to ready the HTML for the next run of the code.

answered Mar 28 '16 at 00:45

user2182349

8,572
3
22
36

I tried this in my demo and personal files and it still returns the same problem. I think it might have more to do with the reloading function preventing my new variable from being reassigned. – jsadams27 Mar 28 '16 at 01:17
Remove the **var**s from the gridSIzes as well - you should only declare global variables once. And the location.reload – user2182349 Mar 28 '16 at 15:56

score 1 · Answer 2 · answered Mar 28 '16 at 00:46

1

gridAmount is your global right? and you want to assign the value of the prompt into it?

gridAmount = window.prompt("From 1 to 64, what is your grid's parameters (00 x 00)?");

just remove the var when assigning new value...

answered Mar 28 '16 at 00:46

jatazoulja

95
1
9

Dammeul · Answer 3 · 2016-03-28T00:51:32.420

You're right in thinking it may not be possible. The page is reloading before the gridAmount can ever be set.

You need to pass the value back to the page and set it before you reload the page.

You could reload the page with a query string ?show_prompt=true (or one that contains a value you need etc.) for example.

Then you would be able to check if that was set when the page loads / reloads and show the prompt, get the value from the user and set that to var gridAmount at the top of the script.

Changing a global variable to a window.prompt() variable within a .click function in javascript

3 Answers3