Hướng dẫn javascript addeventlistener change color - javascript addeventlistener thay đổi màu sắc

Sự kiện của tôi dường như không hoạt động.

Tôi đã có nút ở giữa và màu nền thành màu đỏ nhưng khi tôi cố gắng nhấp vào nút để thay đổi màu nền, nó sẽ không hoạt động.

Cảm ơn trước

HTML:

    
    
    


    Click Me

Javascript:

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

CSS:

    button{
    position: absolute;
    top: 50%;
    left: 50%;
}
body{
    background-color: red;
}

Musa

94,7K17 Huy hiệu vàng114 Huy hiệu bạc130 Huy hiệu đồng17 gold badges114 silver badges130 bronze badges

Đã hỏi ngày 10 tháng 6 năm 2021 lúc 21:24Jun 10, 2021 at 21:24

2

Vì vậy, có một vài điều.

Bạn không có một phần tử trong HTML với một lớp 'màu'.

Thứ hai là RandomNumber của bạn không thực sự ngẫu nhiên. Tôi chắc chắn rằng bạn đang trên đường thực hiện điều đó. Tuy nhiên, tôi sẽ chỉ bao gồm phiên bản của tôi về cách ngẫu nhiên hóa màu trong đoạn trích bên dưới.

Đây là phiên bản cố định:

const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

// This function returns a random number from min to min + range
const getRandomNumber = (min, range) => {
  return Math.floor(Math.random() * range + min)
}

btn.addEventListener('click', function() {
  const randomNumber = getRandomNumber(0, colors.length);
  document.body.style.backgroundColor = colors[randomNumber];
  color.textContent = colors[randomNumber];
});

button {
  position: absolute;
  top: 50%;
  left: 50%;
}

body {
  background-color: red;
}

.color {
  display: inline-block;
  background-color: white;
  padding: 20px 30px;
}

Click Me

red

Đã trả lời ngày 10 tháng 6 năm 2021 lúc 21:28Jun 10, 2021 at 21:28

Để bắt đầu, bạn không có bất kỳ lớp nào bằng tên

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

2 trong HTML của bạn, cũng là

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

3 của bạn trông không quá ngẫu nhiên. Vì vậy, ở đây, tôi đã sửa cả cho bạn bằng cách thêm một div đơn giản với lớp

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

4 vào nó. cũng như một hàm toán đơn giản để cung cấp cho bạn một số nguyên ngẫu nhiên trong khoảng từ 0 đến 3 để bao gồm tất cả các màu của bạn. Hãy xem.

const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function() {
  const randomNumber = Math.floor(Math.random() * 4)
  document.body.style.backgroundColor = colors[randomNumber];
  color.textContent = colors[randomNumber];
});

button {
  position: absolute;
  top: 50%;
  left: 50%;
}

body {
  background-color: red;
}

Click Me

Color name will show here

Đã trả lời ngày 10 tháng 6 năm 2021 lúc 21:36Jun 10, 2021 at 21:36

JohnjohnJohn

4.5791 Huy hiệu vàng5 Huy hiệu bạc14 Huy hiệu đồng1 gold badge5 silver badges14 bronze badges

1. Bạn không có yếu tố nào với lớp chọn của

       const colors = ["green", "red", "blue", "yellow"];
   const btn = document.getElementById('btn');
   const color = document.querySelector('.color');
   
   btn.addEventListener('click', function(){
       const randomNumber = 2;
       document.body.style.backgroundColor = colors[randomNumber];
       color.textContent = colors[randomNumber];
   }
   );
   

   2 trong HTML của bạn, do đó

       const colors = ["green", "red", "blue", "yellow"];
   const btn = document.getElementById('btn');
   const color = document.querySelector('.color');
   
   btn.addEventListener('click', function(){
       const randomNumber = 2;
       document.body.style.backgroundColor = colors[randomNumber];
       color.textContent = colors[randomNumber];
   }
   );
   

   6 của bạn sẽ trả về

       const colors = ["green", "red", "blue", "yellow"];
   const btn = document.getElementById('btn');
   const color = document.querySelector('.color');
   
   btn.addEventListener('click', function(){
       const randomNumber = 2;
       document.body.style.backgroundColor = colors[randomNumber];
       color.textContent = colors[randomNumber];
   }
   );
   

   7.
2. Bạn không có mã phân tích giá trị ngẫu nhiên từ mảng của bạn. Bạn chỉ cần gọi chỉ mục thứ ba của giá trị mảng của bạn

       const colors = ["green", "red", "blue", "yellow"];
   const btn = document.getElementById('btn');
   const color = document.querySelector('.color');
   
   btn.addEventListener('click', function(){
       const randomNumber = 2;
       document.body.style.backgroundColor = colors[randomNumber];
       color.textContent = colors[randomNumber];
   }
   );
   

   3 Điều này sẽ luôn mang lại cho bạn màu xanh vì đây là giá trị thứ ba

       const colors = ["green", "red", "blue", "yellow"];
   const btn = document.getElementById('btn');
   const color = document.querySelector('.color');
   
   btn.addEventListener('click', function(){
       const randomNumber = 2;
       document.body.style.backgroundColor = colors[randomNumber];
       color.textContent = colors[randomNumber];
   }
   );
   

   9

Những điều sau đây phải là những gì bạn đang tìm kiếm ...

const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function() {          
  let random = colors[~~(Math.random()*colors.length)];
  document.body.style.backgroundColor = random;
  color.textContent = random;
});

button {
  position: absolute;
  top: 50%;
  left: 50%;
}

body {
  background-color: red;
}

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

1

Đã trả lời ngày 10 tháng 6 năm 2021 lúc 21:38Jun 10, 2021 at 21:38

Dale Landrydale Landrydale landry

7.2802 Huy hiệu vàng15 Huy hiệu bạc26 Huy hiệu đồng2 gold badges15 silver badges26 bronze badges