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/']
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>
```
First, you're using the wrong function in your callback. Use `onclick='randomcolor()'`. Make sure your JS functions are defined in the `<head>` of the document. Finally, `document.getElementById('background').style.color` is the text color, not the background color. Use `document.getElementById('background').style.background = randomColors();`