Halo saya melakukan kursus tentang JavaScript di latihan pertama mereka meminta untuk membuat tombol yang membuat kotak, dan di latihan kedua mereka meminta untuk menggunakan fungsi ketika mouse mengarahkan kursor ke kotak mereka berubah warna secara acak, tetapi saya tidak berhasil melakukannya, jadi inilah pembuat kotak pertama:


<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;"
          );
        }
      };

Dan ada fungsi untuk membuatnya berubah warna secara acak:


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

0
Bruno D. 23 Oktober 2019, 17:15

2 jawaban

Jawaban Terbaik

Ini dia:

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 Oktober 2019, 14:33

Silakan periksa ini.. Apakah Anda mencari ini?

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>

Tolong beri tahu saya jika Anda memiliki pertanyaan.

0
Amit 23 Oktober 2019, 14:51