Ad

Why Won't My Javascript RandomColors Function Produce A Random Background When Clicking A Button?

- 1 answer

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" target="_blank" rel="nofollow noreferrer" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a target="_blank" rel="nofollow noreferrer" href="index.html">Home</a></li>
    <li><a target="_blank" rel="nofollow noreferrer" 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!

Ad

Answer

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" target="_blank" rel="nofollow noreferrer" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a target="_blank" rel="nofollow noreferrer" href="index.html">Home</a></li>
    <li><a target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="css/foundation.min.css">
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
    <li><a target="_blank" rel="nofollow noreferrer" href="index.html">Home</a></li>
    <li><a target="_blank" rel="nofollow noreferrer" 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>

Ad
source: stackoverflow.com
Ad