JS не хочет выполнять elem.style для div'a

Question

<div id="divId"></div>
<button id="but">я кнопка</button>
<script>
  'use strict'

  function randInt(min, max) {
    return (Math.floor(Math.random() * (max - min)) + min);
  }



  function randomWidthHeight() {
    let a = randInt(10, 100);
    let b = randInt(10, 100);
    return [a, b];
  }

  function randomColor() {
    let a = randInt(0, 255);
    let b = randInt(0, 255);
    let c = randInt(0, 255);
    return [a, b, c];
  }

  but.addEventListener('click', function(e) {
    let rgbArray = randomColor();
    let size = randomWidthHeight();
    for (let i = 0; i < 20; i++) {
      let elem = document.createElement('div');
      elem.style.backgroundcolor = `rgb(${rgbArray[0]},${rgbArray[1]},${rgbArray[2]})`;
      elem.style.width = size[0];
      elem.style.height = size[1];
      elem.style.display = "inline-block";
      divId.appendChild(elem);
      console.log(i);
    }
  });
</script>

Задание было такое - сделать кнопку, которая создает 20 элементов со случайной шириной и высотой от 10 до 100, случайным задним фоном и со свойством display:inline-block. Не выдает ошибок, ничего не работает(

Answer 1

Всё просто:

Не backgroundcolor, а backgroundColor
Задать ширину в нужных единицах, например в пикселях
```
elem.style.width = size[0] + 'px';
elem.style.height = size[1] + 'px';
```

div {
  margin-top: 1px;
  margin-left: 1px;
  border: 1px solid black;
}

<div id="divId"></div>
<button id="but">я кнопка</button>
<script>
  'use strict'

  function randInt(min, max) {
    return (Math.floor(Math.random() * (max - min)) + min);
  }



  function randomWidthHeight() {
    let a = randInt(10, 100);
    let b = randInt(10, 100);
    return [a, b];
  }

  function randomColor() {
    let a = randInt(0, 255);
    let b = randInt(0, 255);
    let c = randInt(0, 255);
    return [a, b, c];
  }

  but.addEventListener('click', function(e) {    
    for (let i = 0; i < 20; i++) {
      let rgbArray = randomColor();   // Должно быть внутри цикла???
      let size = randomWidthHeight(); // Должно быть внутри цикла???
    
      let elem = document.createElement('div');
      elem.style.backgroundColor = `rgb(${rgbArray[0]},${rgbArray[1]},${rgbArray[2]})`;
      elem.style.width = size[0] + 'px';
      elem.style.height = size[1] + 'px';
      elem.style.display = "inline-block";
      divId.appendChild(elem);      
    }
  });
</script>

Answer 2

<button id="but">я кнопка</button>
<div id="divId"></div>
<script>
  'use strict'

  function randInt(min, max) {
    return (Math.floor(Math.random() * (max - min)) + min);
  }

  function randomWidthHeight() {
    let a = randInt(10, 100);
    let b = randInt(10, 100);
    return [a, b];
  }

  function randomColor() {
    let a = randInt(0, 255);
    let b = randInt(0, 255);
    let c = randInt(0, 255);
    return [a, b, c];
  }

  but.addEventListener('click', function(e) {
    for (let i = 0; i < 20; i++) {
      let rgbArray = randomColor();
      let size = randomWidthHeight();
      let elem = document.createElement('div');
      elem.style.background = `rgb(${rgbArray[0]},${rgbArray[1]},${rgbArray[2]})`;
      elem.style.width = size[0] + 'px';
      elem.style.height = size[1] + 'px';
      elem.style.display = "inline-block";
      elem.style.border = '1px solid red';
      divId.appendChild(elem);
    }
  });
</script>

Answer 3

'use strict'

function randInt(min, max) {
  return (Math.floor(Math.random() * (max - min)) + min);
}



function randomWidthAndHeight() {
  const width = randInt(10, 100);
  const height = randInt(10, 100);
  return { width, height };
}

function randomColor() {
  const a = randInt(0, 255);
  const b = randInt(0, 255);
  const c = randInt(0, 255);
  return { a, b, c };
}

const button = document.querySelector('#but');
const container = document.querySelector('#divId');

button.addEventListener('click', function(e) {
  for (let i = 0; i < 20; i++) {
    const elem = document.createElement('div');
    const rgb = randomColor();
    const size = randomWidthAndHeight();
    elem.style.backgroundColor = `rgb(${rgb.a},${rgb.b},${rgb.c})`;
    elem.style.width = `${size.width}px`;
    elem.style.height = `${size.height}px`;
    elem.style.display = "inline-block";
    container.appendChild(elem);
  }
});

<div id="divId"></div>
<button id="but">я кнопка</button>

БЛОГ НА HUSL

JS не хочет выполнять elem.style для div'a

Ответы (3 шт):