How to refresh a variable using a button with jQuery or JavaScript
<p><strong>the JSFiddle version wasn't working so I've added a codepen instead
 <a href="http://codepen.io/anon/pen/LRgPOq" rel="nofollow">Working Codepen</a></strong></p>

<p>I'm fairly new to JavaScript and jQuery so I apologize if my wording isn't quite right or if the answer is extremely obvious, I'm here to learn :) So I've built a rock paper scissors game, everything works great apart from my 'New Game' button. I can't figure out how to refresh the variable 'computerChoice'. I've been able to set it so that the page will refresh, but that's not what I want to achieve. I want it so that when you click 'New Game' the variable 'computerChoice' will pick a new option depending on the random number, like when you refresh the page. I've tried setting it to null when you click 'New Game' but then that just returns numbers when you go to play the game.</p>

<p>HTML:</p>

<pre><code>&lt;h1&gt;Rock Paper Scissors&lt;/h1&gt;
&lt;h2&gt;Pick your weapon!&lt;/h2&gt;
&lt;p&gt;&lt;button id="refresh"&gt;New Game&lt;/button&gt;&lt;/p&gt;
&lt;button onClick='choose("rock")' class="choices"&gt;Rock&lt;/button&gt;
&lt;button onClick='choose("paper")' class="choices"&gt;Paper&lt;/button&gt;
&lt;button onClick='choose("scissors")' class="choices"&gt;Scissors&lt;/button&gt;
&lt;p&gt;&lt;button onClick='compare(user, computerChoice)' class="compares"&gt;1...2...3...&lt;/button&gt;&lt;/p&gt;
&lt;p&gt;&lt;b id="you"&gt;...&lt;/b&gt; Vs. 
&lt;b id="computer"&gt;...&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;b id="results"&gt;&lt;/b&gt;&lt;/p&gt;
</code></pre>

<p>JavaScript: </p>

<pre><code>//user choices
var user;
var choose = function(choice) {
user = choice;
//document.getElementById("you").innerHTML = user;
}

//computer choices
var computerChoice = Math.random();
if (computerChoice &lt; 0.34) {
  computerChoice = "rock";
} 
else if (computerChoice &lt; 0.67) {
  computerChoice = "paper";
} 
else {
  computerChoice = "scissors";
}

//compare user choice to computer choice
function compare(choice1, choice2) {
if (choice1 === choice2) {
  document.getElementById('results').innerHTML = "How boring, you tied.";
}  
else if (choice1 === "rock") {
  if (choice2 === "scissors") {
    document.getElementById('results').innerHTML = "They'll feel that in the morning.";
} else {
  document.getElementById('results').innerHTML = "Can you breathe? I think not.";
}
}  
else if (choice1 === "scissors") {
if (choice2 === "paper") {
  document.getElementById('results').innerHTML = "Snippitysnip, you sliced them in two.";
} else {
  document.getElementById('results').innerHTML = "Ouch, looking a little blunt.";
}
} 
else if (choice1 === "paper") {
if (choice2 === "rock") {
  document.getElementById('results').innerHTML = "You smothered them, eesh!"
} else {
  document.getElementById('results').innerHTML = "You're looking a bit like a banana split."
}
} 
else {
document.getElementById('results').innerHTML = "Something's not quite right...what did you do?!"
}
}

// refresh, clear and display computer choices and results. Disable, enable buttons.
function disableButtons() {
  $('button.choices').attr('disabled', true);
}

function enableButtons() {
  $('button.choices').attr('disabled', false);
}

$('.choices').click(function() {
  $('#you').html(user); // this works on codepen but not on jsfiddle? D:
  $('#computer').html('...');
  disableButtons();
});
$('#refresh').click(function() {
  $('#results').html('');
  $('#you, #computer').html('...');
  enableButtons();
  refreshComputer();
});
$('.compares').click(function() {
  $('#computer').html(computerChoice);
});
</code></pre>

<p>the JSFiddle version wasn't working so I've added a codepen instead
 <a href="http://codepen.io/anon/pen/LRgPOq" rel="nofollow">Working Codepen</a></p>