CODEWITHSUNDEEP
javascripthtmlcss
Joel Carter
Joel Carter

Reputation: 179

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!

Upvotes: 2

Views: 110

Answers (3)

wrleskovec
wrleskovec

Reputation: 326

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.

Upvotes: 2

repzero
repzero

Reputation: 8402

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>

Upvotes: 0

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23389

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();

Upvotes: 0

Related Questions