CODEWITHSUNDEEP
javascriptjquery
Mayank Chawla
Mayank Chawla

Reputation: 49

print variable outside function in javascript

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.

Upvotes: 1

Views: 735

Answers (7)

misterwolf
misterwolf

Reputation: 424

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!

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 3

mplungjan
mplungjan

Reputation: 177786

  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>

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

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>

Upvotes: 0

Hemal
Hemal

Reputation: 3760

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";
});
});

Upvotes: 1

elementzero23
elementzero23

Reputation: 1429

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.

Upvotes: 0

Related Questions