The 'css' property cannot be set on something that is undefined

Question

The 'css' property cannot be set on something that is undefined

I'm attempting to dynamically change the size and color of a circle based on user input in the form fields. However, I've encountered the following error:

Cannot set properties of undefined (setting 'css')

Could anyone provide guidance on how I can resolve this issue?

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;
  };
});

javascript html css undefined

Answer 1

Answer №1

The key problem with your code is that the Element.style does not have a css property. It is best practice to set the individual style properties separately, corresponding to CSS properties, instead of as a single CSS string.

Moreover, getElementsByClassName() returns a collection of Element objects, so you cannot directly access the style property on it. If there are multiple .circle elements in the DOM, you will need to iterate through them.

It is also recommended to use addEventListener() over using onclick or other onX properties.

Here is a revised example that addresses these issues:

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>

Answer 2

The key problem with your code is that the Element.style does not have a css property. It is best practice to set the individual style properties separately, corresponding to CSS properties, instead of as a single CSS string.

Moreover, getElementsByClassName() returns a collection of Element objects, so you cannot directly access the style property on it. If there are multiple .circle elements in the DOM, you will need to iterate through them.

It is also recommended to use addEventListener() over using onclick or other onX properties.

Here is a revised example that addresses these issues:

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>

The 'css' property cannot be set on something that is undefined

Answer №1

Similar questions

Creating a jQuery multiple image preview feature is a simple and effective way to

Tips for halting a MySQL database transaction within a NodeJS environment using expressJS

Preserve object properties while allowing for changes to be made without affecting

Introducing React JSX via a nifty bookmarklet

Switch between two fields using just one animation

The Vue router is unable to access the store state

Error: The specified module could not be found: Could not resolve 'react-hot-loader/webpack'

Requesting information from a model using a JavaScript variable in a cshtml file in an ASP.NET application

What is the best way to position a title and subheading alongside an image?

Learning the ins and outs of HTML5 and CSS3

Strong tags within MFC

Get Code Now Button

A guide to JavaScript: Fetching and Parsing JSON Data from an API

Eliminate disparity in Woocommerce shopping cart

How can you apply margin to an element within a column in Bootstrap 4?

Throttle the RxJs interval based on the inner observables

Verify the status of the nested reactive forms to determine if the child form is in a dirty state

What are some ways to style an image that has been added using JavaScript using CSS?

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

Switch Background Image - The image failed to display