CODEWITHSUNDEEP
javascripthtml
Zen Turtle
Zen Turtle

Reputation: 41

Why does console log not work after a return statement?

I am testing my code and I can't figure out why it's not working.

I created buttons in HTML for each choice and created a function in JavaScript for each choice. I included onclick in HTML to call the respective functions and try to log the choice in the console so I could see if it was working but nothing happens when I click the userRock button.

I would greatly appreciate some help. Thank you.

let userChoice;

function userRock () {
  userChoice = 'rock';
  return userChoice;
  console.log(userChoice);
}

function userPaper () {
  userChoice = 'paper';
  return userChoice;
}

function userScissors () {
  userChoice = 'scissors';
  return userChoice;
}

function userLizard () {
  userChoice = 'lizard';
  return userChoice;
}

function userSpock () {
  userChoice = 'spock';
  return userChoice;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Rock, Paper, Scissors, Lizard, Spock</title>

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class = "container">
      <button id = "rock" onclick = "userRock()">Rock</button> <button id = "paper" onclick = "userPaper()">Paper</button> <button id = "scissors" onclick = "userScissors()">Scissors</button> <button id = "lizard" onclick = "userLizard()">Lizard</button> <button id = "spock" onclick = "userSpock()">Spock</button>
    </div>
  <script src="scripts.js"></script>
  </body>
</html>

Link to codepen: https://codepen.io/zenturtle/pen/YzqXVbB?editors=1111

Upvotes: 1

Views: 3262

Answers (4)

Hadi Mir
Hadi Mir

Reputation: 5133

Your code is correct there is no syntactic error in it however do note that whatever code you write after return statement will never get executed. According to MDN when a return statement is used in a function body, the execution of the function is stopped. So just move the console.log above your return statement.

Upvotes: 2

s.kuznetsov
s.kuznetsov

Reputation: 15223

return points after console

let userChoice;

function userRock() {
  userChoice = 'rock';
  console.log(userChoice);
  return userChoice;
}

function userPaper() {
  userChoice = 'paper';
  console.log(userChoice);
  return userChoice;
}

function userScissors() {
  userChoice = 'scissors';
  console.log(userChoice);
  return userChoice;
}

function userLizard() {
  userChoice = 'lizard';
  console.log(userChoice);
  return userChoice;
}

function userSpock() {
  userChoice = 'spock';
  console.log(userChoice);
  return userChoice;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Rock, Paper, Scissors, Lizard, Spock</title>

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class = "container">
      <button id = "rock" onclick="userRock()">Rock</button> <button id = "paper" onclick = "userPaper()">Paper</button> <button id = "scissors" onclick = "userScissors()">Scissors</button> <button id = "lizard" onclick = "userLizard()">Lizard</button> <button id = "spock" onclick = "userSpock()">Spock</button>
    </div>
  <script src="scripts.js"></script>
  </body>
</html>

Upvotes: 1

Webber
Webber

Reputation: 5514

Return statements

Note that in most programming languages return is a special keyword.

A function ends it's execution when the return statement is reached.

In your code, when you click on the button that triggers your userRock() function, the following code will execute from top to bottom.

function userRock () {
  userChoice = 'rock';
  return userChoice;
  console.log(userChoice);
}

First it will assign the string rock to your variable userChoice Then you return the choice. Then nothing happens because you returned a value with your function and that is where the function stops.

What you can do to fix it:

first console.log the variable, then return it.

Working example:

function userRock () {
  userChoice = 'rock';
  console.log(userChoice);
  return userChoice;
}

Upvotes: 1

Harmandeep Singh Kalsi
Harmandeep Singh Kalsi

Reputation: 3345

You have return statement before console.log(), which makes the console.log() unreachable.

Update this

function userRock () {
  userChoice = 'rock';
  return userChoice;
  console.log(userChoice); // unreachable
}

to

function userRock () {
  userChoice = 'rock';
  console.log(userChoice);
  return userChoice;
}

Upvotes: 1

Related Questions