Change Background color on Click | Javascript Beginner Project Tutorial

📌 In this episode we will learn to change the background color of a div with a button click, hope you enjoy this video.
👍 Leave a like if you enjoyed it, subscribe and if you have feedback or suggestions for projects that I could build, please tell me in the comments below.
⚜ For the Source Code and other Javascript Beginner Projects visit my GitHub Page: ⚜
github.com/lea...
📋 Here is the List of all my Javascript Beginner Project Tutorials:
➡️ 1. Change Background Color on click:
🔗 • Change Background colo...
➡️ 2. Change Image on Click
🔗 • Change Image on a clic...
➡️ 3. Word Length Calculator
🔗 • Word Length Calculator...
➡️ 4. Simple Counter
🔗 • Simple Counter | Javas...
➡️ 5. Random Quote Generator
🔗 • Random Quote Generator...
➡️ 6. Number Guessing Game
🔗 • Number Guessing Game |...
➡️ 7. Show Day of the Week
🔗 • Number Guessing Game |...
➡️ 8. Height Converter
🔗 • Meter to Feet Converte...
➡️ 9. Weight Converter
🔗 • Weight Converter | Jav...
➡️ 10. BMI Calculator
🔗 • BMI Calculator | Javas...

[@Salah-YT]

thank u so much bro this really helped me I'm a beginner bro so please do a new video ur really good bro don't stop and thank u so much

[@photographersamantha]

This was so helpful and interesting! Thank you for sharing! I love the way you organize your code with the comments so that if you or anyone else were to revisit it later but is pretty human readable. That is something I want to start doing!

[@CodePhilipYT]

Thanks for your kind comment :)

[@mahisarwar]

Thanks

[@lakhan2277]

Great, this is the right way to teach js. Thanks a lot brother

[@favxlawreal]

I just saw the error it worked for me
Thanks a lot

[@julirathore5617]

Thanks for this video 😄

[@ildikoedit9110]

Thank you, it was really helpful!

[@nixck0936]

Dein Video hat mir extrem Weiter geholfen. Ich danke dir :)

[@ayeshaadhikari6123]

Thank you Sir! You have explained very nicely!

[@CodePhilipYT]

Thank you!

[@coderlady_]

Man , you just helped me !!!! I was looking for the solution for weeks !! even though I don't get it when you used math.floor(math.random) together???? !!
anyways THANK YOUUUUUUUU
I am subscribing

[@CodePhilipYT]

Glad I could help you, thank you for the subscription

[@coderlady_]

@@CodePhilipYT I want to loop through colors respecting an order, not randomly, is it possible?

[@CodePhilipYT]

@@coderlady_ Yes thats possible, just order the colors inside your array the way you want. Or replace your javascript code with this:
//Colors array
let colors = ['blue', 'yellow', 'black', 'red', 'brown', 'orange'];
//get button
let button = document.getElementById('button');
var i = 0;
//add event listener
button.addEventListener('click', function(){

i++;
container.style.background = colors[i];
//if the variable "i" is the same as the colors.length - 1 set "i" to -1.
// This resets the colors array and it will start from the first color, remove this if you dont want it to start over and over again.
if(i === colors.length - 1){
i = -1;
}
})
Hope this helps :)

[@coderlady_]

@@CodePhilipYT sorry I didn't get it

[@CodePhilipYT]

@@coderlady_ No problem, take a look at this codepen.io/learn-webdevyt/pen/zYGLBWR I recreated the project here so you can test around.
If you take a look at the colors array you can see that I have a specific order "let colors = ['blue', 'yellow', 'black', 'red', 'brown', 'orange'];" As you can see, the first color is 'blue', than comes 'yellow' and so on.
If you look at the code inside the codepen link you can see that if you click on the button the colors will appear in this order. So the first color will be blue, if you click on the button the next color will be yellow and the next black and so on..
If you would change the order of the colors inside the array for example, "let colors = ['red', 'black', 'yellow', 'blue', 'brown', 'orange'];". The first color of the square would be red, if you click on the button it will be black.
If you still have problems, let me know and tell me what exactly you dont understand.
I hope this clarifies it a bit.

[@madarauzumaki9659]

Become more openly, bro, you in the right way

[@ilamaaranramakrishnan5915]

Hi there, very straight-foward content and easy to understand. Thanks.

[@user1__lastname169]

You are awesome, thank you for your job!!!!

[@aldopelayo446]

very helpful video thank you!

[@ljudiurobi]

This is awesome!

[@pixelheart2467]

you are great teacher.

[@carlosabraaoholanda7220]

Nice project! I was thinking, is there a way to prevent the next color to be the same as the previous one? If so, then the project would be even better!!

[@jake445]

I also have the same question, its because the floor method can often round random numbers to the same integer. But I also don't know how to prevent the same value from repeating:(

[@maxmason75]

Great tutorial thanks! I tried going one further and made multiple divs, gave them a class of "containers" and then selected them using getElementByClass but now it doesn't work. I changed my CSS to style the class too of course. Do I perhaps need to change the last line of code from "container.style.background" ? As your example is selecting an element while now I am wanting to selecting a class. Any help would be appreciated! Thanks!

[@jls534]

great job, but how does JS know what colours to flip the background to? Are those colours we wrote in the array recognised by JS?

[@amazonalexa8965]

The randomizer (random.) is a tool that chooses random colors from that array. It's a predefined package

[@DharmRakshak2]

Very good video, thank you. But i do wish you would spend a little more time explaining things. Maybe a seperate longer video were you explain things in more detail? I would stick better.

[@IbrahimAhmed-uz8ng]

hello sir i wanted to ask how could put this in a loop as I want to do this for multiple divs

[@sanusifatih1722]

Please how can I change a region background colour on area map using onclick button

[@Sharon46655]

This deos nt work to me plz tell why

[@king_of_noobs1790]

i want to change the web background color how?

[@enija5855]

How do you change the size of the square?

[@CodePhilipYT]

in the css file,
.square {
width: 200px
height: 200px
}

[@CodePhilipYT]

Leave a like if this video helped you, also give me feedback and suggestions for more projects!
HTML Part - 0:49
CSS Part - 2:40
JavaScript Part - 3:20

[@zanosajuela2038]

Hi i just subscribed, i need your help with on click function in java, i want it to show 3 divs that are distant from each other. help me please thanks

[@Xeroffice]

Increase audio

[@CodePhilipYT]

Thanks for you feedback, I have created a lot more videos now, I hope the audio is better there

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK SOON;PREPARE

[@itsmeframezi1078]

Is there anyway to get .addEventListener to work? Because whenever i try and use that line of code it tells me that "cannot read property 'addEventListener' of null

[@CodePhilipYT]

It depends, what does your code look like?