Twitter Bootstrap Question posted in

Trying to generate random background color within document ready-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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();
});
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search