I need help with the javascript

Question

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

Answer 1

https://code.sololearn.com/WU8ULH4IzV1D/?ref=app

Answer 2

I think you need to handle events, so when the value changes, it is updated in the JS code and calls a handler function.

Answer 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.

Answer 4

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));

Answer 5

@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

Answer 6

https://code.sololearn.com/WZY31MI834bP/?ref=app

Here you go

Answer 7

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.

Answer 8

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

Answer 9

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()">

Answer 10

@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.

Answer 11

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.

Answer 12

@Cristian Gabriel Mazzulla, How can i pass multiple arguments in "onchange" event can you please elaborate or give me an example?

Answer 13

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

Answer 14

I hope this link helps you

https://code.sololearn.com/WqNqDZy74b4W

Answer 15

https://code.sololearn.com/WE8K4ZmZr8SD/?ref=app

This will solve your problem

Answer 16

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;