CODEWITHSUNDEEP
javascriptjquerycsshtmlcodepen
nicktsan
nicktsan

Reputation: 67

Trying to generate random background color within document ready

I am trying to set the background of my web app to a random color every time it loads and every time a "New Quote" button is pressed. The function I use to generate the random background color is random_bg_color().

I have called it within the $(document).ready(function(){}). I am creating this web app using codepen.io. The link to my web app is here. Currently, the page only loads "white" as the background color. Any feedback on how to fix this is appreciated!

    <!DOCTYPE html>
    <html lang="en" >
      <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
        <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
        <title>CodePen - Random Quote Getter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

        <style>
          #new-quote-btn {

          }
        </style>
      </head>

      <body translate="no" >
        <div class='container-fluid'>
          <button id='new-quote-btn'>New Quote</button>
        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/js/fontawesome-iconpicker.js'></script>
        <script>
          $(document).ready(function() {
            random_bg_color();
            document.getElementById("#new-quote-btn").addEventListener("click", random_bg_color);
          });

          function random_bg_color() {
            var x = Math.floor(Math.random() * 256);
            var y = Math.floor(Math.random() * 256);
            var z = Math.floor(Math.random() * 256);
            var bgColor = "rgb(" + x + "," + y + "," + z + ")";
            console.log(bgColor);
            document.body.style.background = bgColor;
          }
        </script>
      </body>
    </html>

Upvotes: 0

Views: 862

Answers (2)

Akash Pinnaka
Akash Pinnaka

Reputation: 475

Add jQuery CDN in your <head> tag. See line 10 below. I can see it is working in your codepen after adding jQuery.

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
    <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
    <title>CodePen - Random Quote Getter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
      #new-quote-btn {

      }
   </style>
</head>

And in your javascript update your code like below

$(document).ready(function() {
    random_bg_color();
    $("#new-quote-btn").on("click", function() {
        random_bg_color();
    });
});

function random_bg_color() {
  var x = Math.floor(Math.random() * 256);
  var y = Math.floor(Math.random() * 256);
  var z = Math.floor(Math.random() * 256);
  var bgColor = "rgb(" + x + "," + y + "," + z + ")";
    console.log(bgColor);
  document.body.style.background = bgColor;
}

Upvotes: 0

majita
majita

Reputation: 1326

You need to add a link to JQuery as mentioned and your getElementById has an incorrect selector so no event listener is getting added. Remove the # and it will work -

document.getElementById("new-quote-btn").addEventListener("click", random_bg_color);

Since you are using JQuery you can use this code to attach an event listener -

$("#new-quote-btn").on("click", function() {
    random_bg_color();
});

Upvotes: 2

Related Questions