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>Two options:
const selectSection = document.querySelector(".select-section");
let x;
function myFunction() {
x = document.getElementById("my-select").value;
selectSection.style.backgroundColor = x;
}
myFunction()
console.log(x);
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
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;
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>