I'm teaching myself JavaScript and I'm trying to make a random background color appear when a button is clicked. Below you can find my code:

HTML Code

```
<!DOCTYPE html>
<html>
<head>
    <title>Day 4</title>
    <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="http://carter3689.tumblr.com/">Blog</a></li>

</ul>   

</div>
<div class="row">
    <div class="columns small-12">
        <div class="container center">

        <button id="button"class="button center" onclick="randomColors">Click Here for Color of the Day</button>
        </div>

    </div>

</div>

</div>
<script src="js/random-color.js"></script>
</body>
</html>

```

Here is my CSS Code:

```
.background{
    background-color: #ECECEA;
}
.text-padding{
    padding: 50px;
}
input{
    width:250px !important; 
    padding-left: 50px;
}
.inline{
    list-style-type: none;
}
.container{
    margin-left: 500px;
}

```

And lastly, my JavaScript Code. This is where I'm having most of my trouble to be honest.

```
function randomcolor(){
    document.getElementById('background').style.color =randomColors();
}

function randomColors(){
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
    console.log("I'm working now")

}

```

Any help you can provide would be extremely helpful as this is all a learning experience for me. Thanks in advance!
['https://Stackoverflow.com/questions/34602460', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5069799/']
It seems like its basically already been answered by others, but there is nothing wrong with repetition.

1. You are calling `randomColors()` instead of `randomcolor()`.
2. You really shouldn't be using getElementById on the body tag. You can just use document.body to get the body.
3. You need to use `style.background` or `style.backgroundColor` to get the background color instead of text color.
4. You should be including your js scripts in `<head>` instead of near the bottom of your html document to ensure they are loaded before functions from them are called.
What happened is when your html loads, the onclick handler is undefined because your script hasn't been loaded as yet.. .hence you will get an an error in your console.log stating that your function is undefined. Move script tag above your onclick handler.

**Snippet using .onclick**

```js
document.getElementById('button').onclick=randomcolor;
function randomcolor(){
    document.getElementById('background').style.backgroundColor =randomColors();
}

function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
    return result;

}
```

```css
    .background{
    background-color: #ECECEA;
}
.text-padding{
    padding: 50px;
}
input{
    width:250px !important; 
    padding-left: 50px;
}
.inline{
    list-style-type: none;
}
.container{
    margin-left: 500px;
}
```

```html
    <title>Day 4</title>
    <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="http://carter3689.tumblr.com/">Blog</a></li>

</ul>   

</div>
<div class="row">
    <div class="columns small-12">
        <div class="container center">

        <button id="button"class="button center">Click Here for Color of the Day</button>
        </div>

    </div>

</div>

</div>

</html>
```

**Snippet using `addEventListener`**

```js
document.getElementById('button').addEventListener('click',randomcolor,false)
function randomcolor(){
    document.getElementById('background').style.backgroundColor =randomColors();
}

function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
    return result;

}
```

```css
    .background{
    background-color: #ECECEA;
}
.text-padding{
    padding: 50px;
}
input{
    width:250px !important; 
    padding-left: 50px;
}
.inline{
    list-style-type: none;
}
.container{
    margin-left: 500px;
}
```

```html
    <title>Day 4</title>
    <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="http://carter3689.tumblr.com/">Blog</a></li>

</ul>   

</div>
<div class="row">
    <div class="columns small-12">
        <div class="container center">

        <button id="button"class="button center">Click Here for Color of the Day</button>
        </div>

    </div>

</div>

</div>

</html>
```