Уменьшить код JavaScript

359

22 декабря 2021, 06:30

let colorsIn = document.getElementsByClassName('clrB'); 
let body = document.querySelector('body') 
 
let colors = ['red', 'blue', 'pink', 'yellow', 'green', 'purple', 'orange', 'salmon', 'sienna']; 
let i = 0; 
colorsIn[0].onmousedown = function() { 
  if (i == 1) body.style.background = colors[0]; 
  i = 1; 
} 
colorsIn[1].onmousedown = function() { 
  if (i == 1) body.style.background = colors[1]; 
  i = 1; 
} 
colorsIn[2].onmousedown = function() { 
  if (i == 1) body.style.background = colors[2]; 
  i = 1; 
} 
colorsIn[3].onmousedown = function() { 
  if (i == 1) body.style.background = colors[3]; 
  i = 1; 
} 
colorsIn[4].onmousedown = function() { 
  if (i == 1) body.style.background = colors[4]; 
  i = 1; 
} 
colorsIn[5].onmousedown = function() { 
  if (i == 1) body.style.background = colors[5]; 
  i = 1; 
} 
colorsIn[6].onmousedown = function() { 
  if (i == 1) body.style.background = colors[6]; 
  i = 1; 
} 
colorsIn[7].onmousedown = function() { 
  if (i == 1) body.style.background = colors[7]; 
  i = 1; 
} 
colorsIn[8].onmousedown = function() { 
  if (i == 1) body.style.background = colors[8]; 
  i = 1; 
}

.colors { 
  width: 200px; 
  height: 200px; 
  margin: 0 auto; 
  border: 2px solid black; 
  display: flex; 
  flex-wrap: wrap; 
  border-collapse: collapse; 
} 
 
.clrB { 
  width: 33%; 
  height: 33%; 
  display: flex; 
  /* border: 1px solid black; */ 
  /* border-collapse: collapse; */ 
} 
 
.color1 { 
  background-color: red; 
} 
 
.color2 { 
  background-color: blue; 
} 
 
.color3 { 
  background-color: pink; 
} 
 
.color4 { 
  background-color: yellow; 
} 
 
.color5 { 
  background-color: green; 
} 
 
.color6 { 
  background-color: purple; 
} 
 
.color7 { 
  background-color: orange; 
} 
 
.color8 { 
  background-color: salmon; 
} 
 
.color9 { 
  background-color: sienna; 
}

<div class="colors"> 
        <div class="color1 clrB"></div> 
        <div class="color2 clrB"></div> 
        <div class="color3 clrB"></div> 
        <div class="color4 clrB"></div> 
        <div class="color5 clrB"></div> 
        <div class="color6 clrB"></div> 
        <div class="color7 clrB"></div> 
        <div class="color8 clrB"></div> 
        <div class="color9 clrB"></div> 
    </div>

Есть данный код, мне нужно уменьшить его(сделать цикл, например). Прошу не гнобить меня за код, я в JS не так давно.

Answer 1

document.querySelector('.colors').addEventListener('click', function (e) { 
  if (e.target.classList.contains('clrB')) { 
    document.body.style.backgroundColor = getComputedStyle(e.target).backgroundColor 
  } 
})

.colors { 
  width: 174px; 
  height: 174px; 
  margin: auto; 
  border: 2px solid black; 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.clrB { 
  flex: 1 0 30%; 
} 
 
.color1 { background-color: red;    } 
.color2 { background-color: blue;   } 
.color3 { background-color: pink;   } 
.color4 { background-color: yellow; } 
.color5 { background-color: green;  } 
.color6 { background-color: purple; } 
.color7 { background-color: orange; } 
.color8 { background-color: salmon; } 
.color9 { background-color: sienna; }

<div class="colors"> 
  <div class="color1 clrB"></div> 
  <div class="color2 clrB"></div> 
  <div class="color3 clrB"></div> 
  <div class="color4 clrB"></div> 
  <div class="color5 clrB"></div> 
  <div class="color6 clrB"></div> 
  <div class="color7 clrB"></div> 
  <div class="color8 clrB"></div> 
  <div class="color9 clrB"></div> 
</div>

Answer 2

let colors = ['red', 'blue', 'pink', 'yellow', 'green', 'purple', 'orange', 'salmon', 'sienna']; 
 
let clrB = document.querySelectorAll('.clrB'); 
 
for( let i = 0; i < clrB.length; i++ ){ 
  clrB[i].addEventListener('click', function(e){ 
    document.body.style.backgroundColor = colors[i]; 
  }) 
}

.colors { 
    width: 200px; 
    height: 200px; 
    margin: 0 auto; 
    border: 2px solid black; 
    display: flex; 
    flex-wrap: wrap; 
    border-collapse: collapse; 
  } 
 
  .clrB { 
    width: 33%; 
    height: 33%; 
    display: flex; 
    /* border: 1px solid black; */ 
    /* border-collapse: collapse; */ 
  } 
 
  .color1 { 
    background-color: red; 
  } 
 
  .color2 { 
    background-color: blue; 
  } 
 
  .color3 { 
    background-color: pink; 
  } 
 
  .color4 { 
    background-color: yellow; 
  } 
 
  .color5 { 
    background-color: green; 
  } 
 
  .color6 { 
    background-color: purple; 
  } 
 
  .color7 { 
    background-color: orange; 
  } 
 
  .color8 { 
    background-color: salmon; 
  } 
 
  .color9 { 
    background-color: sienna; 
  }

<div class="colors"> 
    <div class="color1 clrB"></div> 
    <div class="color2 clrB"></div> 
    <div class="color3 clrB"></div> 
    <div class="color4 clrB"></div> 
    <div class="color5 clrB"></div> 
    <div class="color6 clrB"></div> 
    <div class="color7 clrB"></div> 
    <div class="color8 clrB"></div> 
    <div class="color9 clrB"></div> 
</div>