print variable outside function in javascript

Question

var userChoice;
$(document).ready(function(){
$("#rock").click(function(){
  userChoice = "rock";
});
$("#paper").click(function(){
    userChoice = "paper";
});
$("#scissors").click(function(){
    userChoice = "scissors";
});
});
document.write(userChoice);

I am trying to get the user output after the click event. But when I run this code I get the output as "undefined". I am very new to programming.

Answer 1

Firstly, don't use document.write . It's considered very bad practice. Instead amend the text of a DOM element to show the output.

Secondly, the problem is because you only check the value of userChoice on load of the page. You need to instead check it under each of the click events, like this:

 $(document).ready(function() { $("#rock").click(function() { var userChoice = "rock"; $('#output').text(userChoice); }); $("#paper").click(function() { var userChoice = "paper"; $('#output').text(userChoice); }); $("#scissors").click(function() { var userChoice = "scissors"; $('#output').text(userChoice); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="rock">Rock</button> <button id="paper">Paper</button> <button id="scissors">Scissors</button> <div id="output"></div> 

Note however that you can improve this code further by using the DRY (Don't Repeat Yourself) principle. To do that apply a class to all the elements and use a single event handler:

 $(document).ready(function() { $(".choice").click(function() { userChoice = this.id; $('#output').text(userChoice); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="rock" class="choice">Rock</button> <button id="paper" class="choice">Paper</button> <button id="scissors" class="choice">Scissors</button> <div id="output"></div> 

Answer 2

This is because,

document.write(userChoice);

executes on page load and userChoice gets the new value when some click action performs.

So try this:

$("#scissors").click(function(){
    userChoice = "scissors";
    console.log(userChoice);
});

Note: Do not use document.write() as this will make your entire page blank and show only text in userChoice

Answer 3

You have to put printing inside click event. When page loads, document.write fires immediately and its null at that time.

var userChoice;
$(document).ready(function(){
$("#rock").click(function(){
  userChoice = "rock";
  console.log(userChoice);//THIS WAY
});
$("#paper").click(function(){
    userChoice = "paper";
});
$("#scissors").click(function(){
    userChoice = "scissors";
});
});

Answer 4

Put document.write() inside the click callback functions:

var userChoice;
$(document).ready(function(){
$("#rock").click(function(){
  userChoice = "rock";
  document.write(userChoice);
});
$("#paper").click(function(){
    userChoice = "paper";
    document.write(userChoice);
});
$("#scissors").click(function(){
    userChoice = "scissors";
    document.write(userChoice);
});
});

document.write() gets called once the page has loaded and only this time. But as you didn't give userChoice a value on initialization, it's value is undefined . When you click on one of the buttons, the value of userChoice gets changed, but document.write() gets not called again.

Answer 5

Replace your functions by only one and get the choice by using innerHTML or change it where the value is.

Your document.write(userChoice); will be executed before the click events and will not be updated on click

 var userChoice; $(document).ready(function() { $(".choice").click(function(){ userChoice = this.innerHTML; console.log(userChoice); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="choice">rock</p> <p class="choice">paper</p> <p class="choice">scissors</p> 

Answer 6

1. never execute document.write after page load. Instead update some tag's .html()
2. you execute your write before you click anything.

You likely mean

 var userChoice = ""; $(document).ready(function() { $(".hitme").click(function() { userChoice = this.id; $("#choice").html(userChoice); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="hitme" type="button" id="rock">Rock</button> <button class="hitme" type="button" id="paper">Paper</button> <button class="hitme" type="button" id="scissors">Scissors</button> <span id="choice"></span> 

Answer 7

I suppose, better do not give you the final code but more explanation about code execution:

Do not use

document.write

it's dangerous, it can rewrite whole html page (when the page is already loaded).

The output is set on "undefined" because the variable

userChoice

is not still initialized, it will be initialized once user triggers an event: in your case a click on the divs. So just move the "userChoice" print/elaboration

 (eg: $('.some_div').innerHTML = userChoice) 

into an eventHandler, like one of yours:

$("#scissors").click(function(){ .... })

Read this guide for better info about javascript execution/running time: http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/ . If you will like it and coding in general maybe in future you will post other interesting questions about Javascript!