создание div меняет его фон при наведении мыши на JavaScript

Question

Здравствуйте, я делаю курс о JavaScript в первом упражнении, в котором они просят сделать кнопку для создания блоков, а во втором упражнении они просят использовать функцию, когда мышь наводит курсор на прямоугольники. они меняют цвет случайным образом, но мне не удалось это сделать, так что вот, во-первых, производитель коробок:


<body>
    <button>CREATE</button>
    <p>BOXES GENERATOR</p>
    <div class="container"></div>
</body>

      var button1 = document.querySelector("button");

      button1.onclick = function() {
        var cubeElement = document.createElement("div");
        cubeElement.setAttribute("class", "bt");

        var bodyElement = document.querySelector(".container");
        bodyElement.appendChild(cubeElement);

        var cubestyleElement = document.querySelectorAll(".bt");
        for (var i = 0; i < cubestyleElement.length; i++) {
          cubestyleElement[i].setAttribute(
            "style",
            "background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
          );
        }
      };

И есть функция, позволяющая произвольно менять цвета:


function getRandomColor() {
           var letters = "0123456789ABCDEF";
           var color = "#";
           for (var i = 0; i < 6; i++) {
             color += letters[Math.floor(Math.random() * 16)];
           }
           return color;
         };
         var newColor = getRandomColor(); // #E943F0

javascript html

0

Bruno D. 23 Окт 2019 в 17:15

Answer 1

Ну вот:

function getRandomColor() {
           var letters = "0123456789ABCDEF";
           var color = "#";
           for (var i = 0; i < 6; i++) {
             color += letters[Math.floor(Math.random() * 16)];
           }
           return color;
         };
        
var i = 0;
var button1 = document.querySelector("button");

      button1.onclick = function() {
        var cubeElement = document.createElement("div");
        cubeElement.setAttribute("class", "bt");

        var bodyElement = document.querySelector(".container");
        bodyElement.appendChild(cubeElement);

        var cubestyleElement = document.querySelectorAll(".bt");
        for (i; i < cubestyleElement.length; i++) {
        var element = cubestyleElement[i];
          element.setAttribute(
            "style",
            "background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
          );
          element.onmouseover = function(){
           var newColor = getRandomColor(); 
          element.setAttribute(
            "style",
            "background:"+ newColor+"; height: 100px; width: 100px; border: solid #000 2px;"
          );
          }
        }
      };

<button>CREATE</button>
    <p>BOXES GENERATOR</p>
    <div class="container"></div>

0

Leonardo Soares 23 Окт 2019 в 14:33

Answer 2

Пожалуйста, проверьте это .. Вы ищете это?

var button1 = document.querySelector("button");

      button1.onclick = function() {
        var cubeElement = document.createElement("div");
        cubeElement.setAttribute("class", "bt");
        
        cubeElement.addEventListener('mouseover', function(event) {
          event.target.style.backgroundColor = getRandomColor();
        });
        
        var bodyElement = document.querySelector(".container");
        bodyElement.appendChild(cubeElement);

        var cubestyleElement = document.querySelectorAll(".bt");
        for (var i = 0; i < cubestyleElement.length; i++) {
          cubestyleElement[i].setAttribute(
            "style",
            "background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
          );
        }
      };

function getRandomColor() {
           var letters = "0123456789ABCDEF";
           var color = "#";
           for (var i = 0; i < 6; i++) {
             color += letters[Math.floor(Math.random() * 16)];
           }
           return color;
};

<body>
    <button>CREATE</button>
    <p>BOXES GENERATOR</p>
    <div class="container"></div>
</body>

Пожалуйста, дайте мне знать, если у вас возникнут вопросы.

0

Amit 23 Окт 2019 в 14:51

создание div меняет его фон при наведении мыши на JavaScript

2 ответа

Похожие вопросы

Новые вопросы

javascript