2

Задача такая "Надо написать функцию которая будет принимать элемент, css правило, и его значения. Устанавливать элементу css правило с значением"

  function setCssAttribute(element, property, value) {
  cube.style[property] = value;
}

  setCssAttribute(cube, 'backgroundColor', 'black');
  setCssAttribute(cube, 'height', '175');

document.querySelector('#width_btn').addEventListener('click', function(){
    setCssAttribute()
});
2
  • функция правильно написана, в чем конкретно проблема?
    – Volodymyr
    22 янв 2019 в 11:04
  • вы вызываете функцию setCssAttribute без параметров, попробуйте внутри обработчика onclick вызвать функцию так setCssAttribute(this, 'width', '175px');
    – Volodymyr
    22 янв 2019 в 11:15

2 ответа 2

2

Ваши ошибки

1  function setCssAttribute(element, property, value) {
2    cube.style[property] = value;
3  }
4  
5    setCssAttribute(cube, 'backgroundColor', 'black');
6    setCssAttribute(cube, 'height', '175');
7  
8  document.querySelector('#width_btn').addEventListener('click', function(){
9      setCssAttribute()
10 });
  1. Строка 2: переменная cube не обозначена, элементом является первый аргумент функции и называется element
  2. Строка 5: в функцию первым аргументом вместо элемента отсылается undefined, так как переменная cube не обозначена.
  3. Строка 6: в функцию первым аргументом вместо элемента отсылается undefined, так как переменная cube не обозначена.
  4. Строка 9: в функцию не передаются никакие аргументы, тем самым setCssAttribute вновь выкинет исключение в виде отсутствия элемента (undefined).

А вот правильный код

function setCssAttribute(element, property, value) {
  element.style[property] = value;
}

document.querySelector('#width_btn').addEventListener('click', function() {
  setCssAttribute(this, 'backgroundColor', 'black');
  setCssAttribute(this, 'height', '175px');
});
<div id="width_btn" style="width:50px;height:50px;background:gray;"></div>

this является элементом, которому было присвоено событие click. его и отправляем в функцию первым аргументом.

1

Как-то так. Если нужны будут пояснения - пишите

element = document.querySelector('#width_btn');

setCssProperty(element, 'width', '175px');
setCssProperty(element, 'height', '175px');

element.addEventListener(
  'click',
  clickHandler,
  false
);

function setCssProperty(element, property, value) {
  element.style[property] = value;
}

function clickHandler(event){
    setCssProperty(event.target, 'width', '100px');
    setCssProperty(event.target, 'height', '100px');  
}
#width_btn {  
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="width_btn">Click me!</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.