Попытка создать случайный цвет фона в готовом документе

Я пытаюсь установить случайный цвет фона моего веб-приложения каждый раз, когда оно загружается и каждый раз, когда нажимается кнопка "Новая цитата". Функция, которую я использую для генерации случайного цвета фона, называется random_bg_color().

Я назвал это в пределах $(document).ready(function(){}). Я создаю это веб-приложение, используя codepen.io. Ссылка на мое веб-приложение находится здесь. В настоящее время страница загружает только «белый» цвет фона. Любые отзывы о том, как это исправить, приветствуются!

    <!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>

javascript html jquery css codepen
person nicktsan    schedule 09.05.2018    source источник
comment
Это похоже на домашнее задание.   -  person Troyer    schedule 09.05.2018
comment
Возможный дубликат Как я могу изменить цвет фона случайным образом с помощью Javascript?   -  person Alexis Caso    schedule 09.05.2018
comment
Где вы добавили jQuery CDN?   -  person Akash Pinnaka    schedule 09.05.2018

Ответы (2)


arrow_upward
0
arrow_downward

Добавьте jQuery CDN в свой тег <head>. См. строку 10 ниже. Я вижу, что он работает в вашей кодовой ручке после добавления 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>

И в вашем javascript обновите свой код, как показано ниже.

$(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;
}
person Akash Pinnaka    schedule 09.05.2018
comment
Большое спасибо! Я новичок в веб-разработке, поэтому это мне очень помогло! - person nicktsan; 10.05.2018
comment
Нет проблем @niktsan :) - person Akash Pinnaka; 10.05.2018

arrow_upward
2
arrow_downward

Вам нужно добавить ссылку на JQuery, как уже упоминалось, и ваш getElementById имеет неправильный селектор, поэтому прослушиватель событий не добавляется. Убери # и все заработает -

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

Поскольку вы используете JQuery, вы можете использовать этот код для подключения прослушивателя событий -

$("#new-quote-btn").on("click", function() {
    random_bg_color();
});
person majita    schedule 09.05.2018
comment
Большое спасибо! Я новичок в веб-разработке, поэтому это мне очень помогло! - person nicktsan; 10.05.2018