Why does console log not work after a return statement?

user_3878563 0
Viewed 697

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

html javascript
4 Answers

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.

user_99209470

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;
}
user_71183420

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;
}
user_35938960

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>

user_135734440
Related