Question 280812 in Html Question posted in
Some basic documentation can be found here.

Html – How do I return a value from addEventListener so as to be used by another object

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

Tags:

3

Answers


  1. 0

    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';
    Login or Signup to reply.
  2. 0

    So I think you want to update the background color every time any of the event fires (blueslider , redslider or greenslider) , so firstly you need to update the global variables red, blue and green every time any of the event fires to the slider’s value you are getting from the input and then create a
    new function to update changebg.style.backgroundColor = rgb(${red}, ${green}, ${blue}) this value and call the function every time any of the respective event fires.

    eg.

    blueslider.addEventListener('input',(e)=>{
     console.log(`the value of blue is ${blueslider.value}`);
     blue = blueslider.value;
     //our new function
     change_background();
});

change_background(){
     changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}
    Login or Signup to reply.
  3. 0

    As you’ve fixed moving those pointers – there was an issue in JS.

    I created a function which will update background color and also text inside valuee div

    var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')
const changebg = document.getElementById('rangeValue');

//getting values from sliders set by default
var red = redslider.value;
var green = greenslider.value;
var blue = blueslider.value;

function updateValueElement() {
    changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
    changebg.textContent = `${red}, ${green}, ${blue}`;
}

redslider.addEventListener('input',(e)=>{
    console.log(`the value of red is ${redslider.value}`);
    red = redslider.value;
    updateValueElement();
})
greenslider.addEventListener('input',(e)=>{
    console.log(`the value of green is ${greenslider.value}`)
    green = greenslider.value;
    updateValueElement();
})
blueslider.addEventListener('input',(e)=>{
    console.log(`the value of blue is ${blueslider.value}`)
    blue = blueslider.value;
    updateValueElement();
})


//changing text in valuee div and its background on load
updateValueElement();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search