Cannot set properties of undefined (setting 'css')

Question

I am trying to change the circle size when entering a value in the input, and trying to change the color. But I am getting the following error:

Cannot set properties of undefined (setting 'css')

Can any of you be helpfull with what i can do?

window.addEventListener("DOMContentLoaded", (event) => {
  const inputsize = document.getElementById("size");
  const inputcolor = document.getElementById("color");
  const circle = document.getElementsByClassName("circle");

  let size = 100;
  let color = "#b66465";

  window.onchange = (event) => {
    let myStyles = "height: " + size + "px; width: " + size + "px; background-color: " + color + ";";
    circle.style.css = myStyles;
  };

  inputcolor.onchange = (event) => {
    color = inputcolor.value;
    let myStyles = "height: " + size + "px; width: " + size + "px; background-color: " + color + ";";
    circle.style.css = myStyles;
  };

  inputsize.onkeyup = (event) => {
    size = inputsize.value;
    let myStyles = "height: " + size + "px; width: " + size + "px; background-color: " + color + ";";
    circle.style.css = myStyles;
  };
});

circle is not an element, so it has no style property. — David
– David, Commented Oct 5, 2022 at 19:06
@David I voted to re-open this question as the duplicate you marked, which was about confusion over querySelector/querySelectorAll wasn't directly related to the question here, which is confused over how to set CSS properties of an element. — Rory McCrossan
– Rory McCrossan, Commented Oct 5, 2022 at 19:19
@RoryMcCrossan It's not just about querySelector/All; it's about the getElementsBy* family of methods. And that's exactly the error the user is getting: "Cannot set properties of undefined (setting 'css')" The error would be different if circle.style was defined and had no css property (indeed, there might not be any error at all; it just wouldn't work). If they have a question about that error, that can be addressed separately. — Heretic Monkey
– Heretic Monkey, Commented Oct 5, 2022 at 19:28

Rory McCrossan · Accepted Answer · 2022-10-05 19:23:50Z

The main issue in your code is because Element.style has no css property. It's intended that you set the individual style properties, which generally map to CSS properties, one by one, not as an entire string of CSS.

In addition, getElementsByClassName() returns a collection of Element objects, so you can't call style on it directly. If you have multiple .circle element in the DOM, you would need to loop through them.

Also note that it's better practice to use addEventListner() instead of onclick or other onX properties.

Below is a working example with these issues addressed.

window.addEventListener("DOMContentLoaded", () => {
  const inputSize = document.querySelector("#size");
  const inputColor = document.querySelector("#color");
  const circles = document.querySelectorAll(".circle");
  
  const updateCircles = () => {
    circles.forEach(circle => {
      circle.style.width = inputSize.value + 'px';
      circle.style.height = inputSize.value + 'px';
      circle.style.backgroundColor = inputColor.value;
    });
  }

  inputColor.addEventListener('input', updateCircles);
  inputSize.addEventListener('input', updateCircles);
});

label {
  display: block;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
  margin: 20px;
  display: inline-block;
}

<label>
   Size:
   <input type="number" id="size" value="100" />
</label>
<label>
   Color:
   <input type="color" id="color" value="#000000" />
</label>

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Collectives™ on Stack Overflow

Cannot set properties of undefined (setting 'css')

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related