How can I refresh a Jquery/javascript variable on click without reloading page?

Question

I'll preface this by saying that this seems like something that must have been asked before but, surprisingly, my Googling only turned up tangentially related results.

I have the following code, which is meant to have the following features:

1) Randomly assigns one of 3 values to a variable (VariableVar1random) every time the page loads

2) A button that shows a square on click

3) A button that re-assigns one of the 3 values to the variable without refreshing the page. For example, let's say on page load, the variable generates as "Variable3". If I click on the button that shows the square and then click on the button that re-assigns the value of the variable, the variable should regenerate as either "Variable1" or "Variable2" WITHOUT refreshing the page (square is still showing).

I've tried removeData() among other functions but cannot seem to find anything that works. Is AJAX necessary?

Code: https://jsfiddle.net/asb7bx6p/20/

HTML

<span class="VariableVar1randomreplacer"></span>

<br>
<br>
<div class="buttonresetvariable" style="border:1px solid black;">Click to Reset Variable</div>
<br>
<div class="buttonshowsquare" style="border:1px solid black;">Click to Show Square</div>

<div class="alertsquare" style="display:none;border:1px solid black;height:50px;width:50px;background-color:green;"></div>

JQUERY

 function Variableselector1() {

    var VariableVar1= ['Variable1', 'Variable2', 'Variable3'];
    var VariableVar1random = VariableVar1[Math.floor(Math.random() * VariableVar1.length)];
    return VariableVar1random;
}

    var VariableVar1randomreplacer = Variableselector1();
    $('.VariableVar1randomreplacer').html(VariableVar1randomreplacer );

$( ".buttonshowsquare" ).click(function() {
$( ".alertsquare").show();
});

$( ".buttonresetvariable" ).click(function() {
////???????????????
})

DanilGholtsman · Accepted Answer · 2018-03-22 05:37:06Z

2

Well, for the first glance this will fit in:

$( ".buttonresetvariable" ).click(function() {
   var VariableVar1randomreplacer = Variableselector1();
   $('.VariableVar1randomreplacer').html(VariableVar1randomreplacer );
})

https://jsfiddle.net/asb7bx6p/22/

Is AJAX necessary?

In your case you already got all the data to manipulate with on your client. Briefly AJAX request is necessary when you need to interact/get some data from remote server.

edited Mar 22, 2018 at 5:37

answered Mar 22, 2018 at 5:32

DanilGholtsman

2,3744 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Snoops Over a year ago

I KNEW it had to be ridiculously simple...thank you so much!

Doomenik Over a year ago

@Snoops You can shorten the line btw too: $('.VariableVar1randomreplacer').html(Variableselector1()); not necesarry to create a var for it.

DanilGholtsman Over a year ago

@Doomenik yep, you right, but to keep things closer to OP's post

Doomenik Over a year ago

@DanilGholtsman Yes of course just wanted to give him a small hint.

Snoops Over a year ago

Thank you, all...small nudges in the right direction like this really help.

Collectives™ on Stack Overflow

How can I refresh a Jquery/javascript variable on click without reloading page?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related