What I am trying to make is three sliders that can change the color of a div when it is changed. Each slider is okay and I can check the value as it changes in the console. The challenge I am getting is when I try to assign that value outside the eventListener it doesn’t change anything.
Here is the simple code of the project:
var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')
//the above will take slider and have them as variables
const changebg = document.getElementById('rangeValue')
var red = ''
var green = ''
var blue = ''
redslider.addEventListener('input', (e) => {
console.log(`the value of red is ${redslider.value}`)
// redslider.value = red
})
greenslider.addEventListener('input', (e) => {
console.log(`the value of green is ${greenslider.value}`)
// greenslider.value = green
})
blueslider.addEventListener('input', (e) => {
console.log(`the value of blue is ${blueslider.value}`)
// blueslider.value = blue
})
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.maincontainer {
width: 50%;
height: 50%;
border-radius: 20px;
background: hsla(22, 100%, 78%, 1);
background: linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
width: 70%;
height: 50px;
background: white;
}
.slider input {
width: 90%;
}
.valuee {
position: absolute;
width: 200px;
height: 200px;
top: 40px;
left: 50px;
/* background-color: rgba(43, 46, 43,0.5); */
border: 2px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}<div class="maincontainer">
<div class="slider">
<input type="range" min="0" max="255" value="50" id="r">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="slider">
<input type="range" min="0" max="255" value="50" id="g">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="slider">
<input type="range" min="0" max="255" value="50" id="b">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="valuee" id="rangeValue">100</div>
</div>as you can see from above I have put the red,blue and green variables to be blank as I want them changed when slider input is changed. I then gave the variables a value e.g blueslider.value = blue
it does not work, the slider even refuses to change after the initial slide. I would love help to understand all these. Thanks.
Here is the fiddle
>Solution :
You don’t return a value from an event listener. Nothing is expecting that value and nothing will use that value.
It sounds like what you want to do is change the backgroundColor of an element in your event listeners. Notice how you’re doing that outside of the event listeners:
blueslider.addEventListener('input',(e)=>{
console.log(`the value of blue is ${blueslider.value}`)
// blueslider.value = blue
})
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
If you want to do that inside the event listeners, you can:
blueslider.addEventListener('input',(e)=>{
console.log(`the value of blue is ${blueslider.value}`);
// blueslider.value = blue;
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
});
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
You probably also want to update the variables before using them, for example:
blueslider.addEventListener('input',(e)=>{
console.log(`the value of blue is ${blueslider.value}`);
blue = blueslider.value; // here
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
});
It’s probably also a good idea to initialize those variables to non-empty values (the same values in your inputs), so the initial setting for backgroundColor is valid:
var red = '50';
var green ='50';
var blue = '50';