# javasript random colors for div background

**URL:** https://forum.kirupa.com/t/javasript-random-colors-for-div-background/637437
**Category:** web dev
**Created:** [November 13, 2017, 2:17am UTC](https://forum.kirupa.com/t/javasript-random-colors-for-div-background/637437 "2017-11-13T02:17:23Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 13, 2017, 2:17am UTC](https://forum.kirupa.com/t/javasript-random-colors-for-div-background/637437/1 "2017-11-13T02:17:23Z")

</div>

I am trying to create hex colors randomly that will change the background of a div. It should repeat until a code tells it to stop. I have the code to generate the color I think.

```auto
      function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var hash = '#';
       for (var i = 0; i < 6; i++) {
       hash += letters[Math.floor(Math.random() * 16)];
       }
       document.write(hash);
      return hash;
    }

```

I also need to display the hex code created, I know I need to probably write functions that call functions and some time event to slow down the color display. I haven’t really got the function down yet.  
This is my html

```auto
       <html>
	<head>
		</head>
	<body>
		<div id="bgcolor" style="width: 700px; margin: auto; margin-top: 100px; border: 1px solid black; padding: 
               5px; background-color: #E7E7E7;">
			<p id="text">Power is of two kinds. One is obtained by the fear of punishment and the other by acts 
                          of love. Power based on love is a thousand times more effective and permanent then the one 
                         derived from fear of punishment.<br/><b>Mahatma Gandhi</b><br/>
			<br /><hr />
			Change Background Color&nbsp;&nbsp;&nbsp; Color Hex Value:<span id="color"></span><br />
			Stop Changing Background Color<br />			
		</div>
	  </body>
    </html>

```

Ialso have to write code see less and see more on the text but I haven’t started on that yet.  
Thanks

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 13, 2017, 5:21pm UTC](https://forum.kirupa.com/t/javasript-random-colors-for-div-background/637437/2 "2017-11-13T17:21:44Z")

</div>

Your random color function looks fine, except for the `document.write()`. You’ll want to get rid of that. In fact, you should avoid using `document.write` whenever possible. Depending on what you’re after, there are other, better ways to do what you may be trying with `document.write`.

For the color randomization it sounds like you want to use [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). In fact that link has an example for alternating colors which is very similar to what you’re after, but it sounds like you’re version of `changeColor` would want to be in a button rather then the `onload` used there?

---

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 13, 2017, 10:28pm UTC](https://forum.kirupa.com/t/javasript-random-colors-for-div-background/637437/3 "2017-11-13T22:28:02Z")

</div>

Thanks senocular! You are always so helpful!
