+ 8
I need help with the javascript
i am working on a dummy rgb generator project and i need help. RGB colour changes only when i refresh the page neither random rgb function button is working and rgb slider range function is not working as well. I tried to lookup the rgb range values in console log but function is not generating the expected output. Please guide me where i am doing wrong. https://code.sololearn.com/W4y2m3lhn9s8
16 ответов
+ 10
https://code.sololearn.com/WU8ULH4IzV1D/?ref=app
+ 3
I think you need to handle events, so when the value changes, it is updated in the JS code and calls a handler function.
+ 3
Line 121, remove that paranthesis from that function,
Just write like this
rgb_btn.addEventListener('click',rgb_color);
You don't need to call that function instantly. Just passing function name, and that's enough.
+ 3
Also use addEventListener ("input", fun) and attach your element with this event to get the value of that particular slider through the event.target.value
slider.addEventListener("input", (event) => console.log(event.target.value));
+ 3
@Kelvin Paul, should i add event listener individually to all three sliders and pass the value to the rgb_slider function?
i changed rgb_color() to rgb_color with button evenlistener and now random generator is working as expected thanks
i added onchange event and passed the value but it only changes the one slider value rest two values are undefined.
onChange="rgb_slider(this.value)"
https://code.sololearn.com/Wqrzuqq6QP8i
i will try with addeventlistener now with all three sliders
+ 3
https://code.sololearn.com/WZY31MI834bP/?ref=app
Here you go
+ 3
SAN, I recommend you to replace 'onchange' to 'oninput' in line 121, 124 and 127. Then it will work better and smoothly.
I hope it will help.
+ 2
I also made my version, mine updates the values in the html when the generator is used😌
Thanks, it helped me practice😁
https://code.sololearn.com/WjkXoXO9RX42/?ref=app
+ 1
Math.floor(Math.random() * 256); // Returns a random integer from 0 to 255
<label for="slider_one">R: </label>
<input id="slider_one" type="range" value="0" min="0" max="255" onchange="rgb_color()">
+ 1
@SoloProg
Your approach will generate random rgb colors with three different sliders onchange event . I want to change the rgb color individually using the range bar and display value changing individually of r, g and b.
+ 1
Using "rgb_slider(this.value)" you are sending only the first argument to your rgb_slider function, you need to send the 3 values, I think you will need 3 "onChange" and I would do it all in JS.
Otherwise you will need to change your function.
+ 1
@Cristian Gabriel Mazzulla, How can i pass multiple arguments in "onchange" event can you please elaborate or give me an example?
+ 1
Edwin ,
I like giving you some wats or ideas for improving the website
and you can use this code
input type="color" id="myColor" value="#ff0080"
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_color_value2
+ 1
I hope this link helps you
https://code.sololearn.com/WqNqDZy74b4W
+ 1
https://code.sololearn.com/WE8K4ZmZr8SD/?ref=app
This will solve your problem
0
Hmm idk, maybe you can pass sibling values, but I don't know, im noob haha. I solved it with a "handle()" function that I made to update the values and call rgb_slider(), but it's not the best way..
I think you should make rgb_slider () a function without arguments, that uses and updates the values with this part of the code that you commented:
// var slider_one=document.getElementById("slider_one").value;
// var slider_two=document.getElementById("slider_two").value;
// var slider_three=document.getElementById("slider_three").value;