Joel Carter Joel Carter - 4 years ago 119
Javascript Question

Why won't my Javascript randomColors function produce a random background when clicking a button?

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!

Answer Source

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

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;
    
}
    .background{
    background-color: #ECECEA;
}
.text-padding{
    padding: 50px;
}
input{
    width:250px !important; 
    padding-left: 50px;
}
.inline{
    list-style-type: none;
}
.container{
    margin-left: 500px;
}
    <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

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;
    
}
    .background{
    background-color: #ECECEA;
}
.text-padding{
    padding: 50px;
}
input{
    width:250px !important; 
    padding-left: 50px;
}
.inline{
    list-style-type: none;
}
.container{
    margin-left: 500px;
}
    <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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download