why are we adding html += ?

Hello Rai. How are you? First of I'd like to congratulate you for making it so far in the track! But yet, there's still a lot to learn. So keep on hacking mate!

To answer your question: if you just used

html = '<div style="background-color:' + rbgColor + '"></div>';

you would actualy asign a new value to a html variable (which in this case is a contatination of strings that actualy creates that circle colored div) each time the loop runs. Meaning, for example, if the first time when the loop run the blue color circle was created, the next time that same loop run the violet circle div was created and since you didn't use += but instead you used just = you actualy assigned a new value to that html variable. Meaning, you have actualy overriden that blue circle colored div with a new, violet colored div circle, created when the loop run the 2nd time. And then, when the loop run for the 3rd time, let's assume tomato colored circle div (Guil's favorite color, lol) was created that actualy overriden that violet circle that overriden that blue circle created when the loop first run.

Where as, if you use +=, you are actualy adding that new value of an html variable, or in this case the new violet colored circle, to an already existing blue colored circle, which will not be overriden but will instead add up that violet circle to an already existing blue colored circle (value of an html variable).

Long story short, if you ommited that + before an = (meaning you were using html=) you would end up with only one colored circle that was generated when the loop run for the 10th time, that overriden the colored circle generated when the loop run for the 9th time, and that circle overriden the another circle generated when the loop run for the 8th time, etc. Meaning each time the loop runs new colored circle overides the circle generated one step before.

I hope this explanation is not so confusing, as if so, I'd make a simple few line JS in my workspace and share it with ya. Keep us updated with your progress.

All the best!

Hi Rai, html += '...' is a way of building/adding HTML elements together. In the for loop example, we are creating ten divs with random RGB background colors. In each instance, we are selecting values for red, green and blue and then combining them in rgbColor variable Once this part is done, we are adding these blocks together via adding them on an empty html variable in each instance of the for loop. Please note that html +='..'; is same as html = html + '...'; in string concatenation

I hope that this helps.

Your variable html is of type string. If you use the += operator on a string all it is doing is appending the string after the += to the html string.

It can be used on any string variable you declare within your script

hi mustafa your explanation is very good. html += ' ' ; is same as html = html + ' '; but why are again adding the variable html. I hope you understand what my problem is.

thanks man that helped me a lot. understood but need practise.

I highly recommend jQuery and AJAX intro courses in that order following this one. They are building further on this idea and teaching how to create interesting javascript applications.