how to get the value of a variable declared within a function

Question

I'm a beginner in JS. In my personal project I want to use a datalist of colors to change the div color.

I managed to do it with select. But it doesn't work with datalist. So I decided to console log the value of the variable declared in the function but I get the error: x is not defined. How to make it work? (It's probably a basic question)

const selectSection = document.querySelector(".select-section");

function myFunction() {
  var x = document.getElementById("my-select").value;
  selectSection.style.backgroundColor = x;
}

console.log(x);

<label for="my-select">Pick a color:</label>
<select name="" id="my-select" value="Choose the background color" onChange="myFunction()">
  <option value="default">default</option>
  <optgroup label="Warm Colors">
    <option value="red">red</option>
    <option value="orange">orange</option>
    <option value="yellow">yellow</option>
  </optgroup>
  <optgroup label="Cool Colors">
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="purple">purple</option>
  </optgroup>
</select>

Declare a global variable which will be outside of function and initiate it later in the function — Extraterrestrial
– Extraterrestrial, Commented Aug 3, 2022 at 16:16
You don't have any elements with class .select-section in that markup. — Andy
– Andy, Commented Aug 3, 2022 at 16:17
When I use: let x; outside the function I get undefined; I want to get its value in the console log. — TomDev
– TomDev, Commented Aug 3, 2022 at 16:19
If you add in that missing div that code will work. But yes, that variable is scoped to the function, so move the log inside the function. But there isn't much point since the code works.... — Andy
– Andy, Commented Aug 3, 2022 at 16:24

Konrad · Accepted Answer · 2022-08-03 16:47:21Z

2

Two options:

1

const selectSection = document.querySelector(".select-section");

let x;

function myFunction() {
  x = document.getElementById("my-select").value;
  selectSection.style.backgroundColor = x;
}

myFunction()

console.log(x);

2

const selectSection = document.querySelector(".select-section");

function myFunction() {
  const x = document.getElementById("my-select").value;
  selectSection.style.backgroundColor = x;
  return x
}

const x = myFunction()
console.log(x);

Remember to never use var

edited Aug 3, 2022 at 16:47

answered Aug 3, 2022 at 16:22

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Scott Marcus Over a year ago

In your first example, the console.log(x) will execute before x gets its value.

Samathingamajig Over a year ago

The statement "Remember to never use var" is incorrect, there are still some uses where var should be used

Konrad Over a year ago

Aside from golfing or legacy code, I don't know any. I can agree to never use var if you are a beginner

Scott Marcus Over a year ago

There is nothing wrong with var when you require function level scoping.

Konrad Over a year ago

Why not use let then?

|

Waleed Salah · Accepted Answer · 2022-08-03 16:56:56Z

2

First please don't use the var keyword in your code read this article to know the reason

Second to solve this problem

try to declare your variables in the global scope:

let x; // in global scope (outside the function)
and assign a value inside the function:

x = document.getElementById("my-select").value;

answered Aug 3, 2022 at 16:56

Waleed Salah

212 bronze badges

Comments

Scott Marcus · Accepted Answer · 2022-08-03 16:29:21Z

You can declare the variable outside the scope of the function, but you must make sure to only access that variable AFTER the function has completed, otherwise the code will run BEFORE the function executes and the variable will not have been altered yet.

const selectSection = document.querySelector(".select-section");

let x = null;

function myFunction() {
  x = document.getElementById("my-select").value;
  document.body.style.backgroundColor = x;
  // If this line executes, we know x has been modified, so
  // it's safe to try to access it outside of the function
  showX();
}

function showX(){
  console.log(x);
}

<label for="my-select">Pick a color:</label>
<select name="" id="my-select" value="Choose the background color" onChange="myFunction()">
  <option value="default">default</option>
  <optgroup label="Warm Colors">
    <option value="red">red</option>
    <option value="orange">orange</option>
    <option value="yellow">yellow</option>
  </optgroup>
  <optgroup label="Cool Colors">
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="purple">purple</option>
  </optgroup>
</select>

Collectives™ on Stack Overflow

how to get the value of a variable declared within a function

3 Answers 3

1

2

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1

2

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related