After creating an inline SVG with multiple rectangle elements and applying the same color to all of them using CSS, I assigned unique IDs to each rectangle. However, when attempting to manipulate the rectangles' colors with plain JavaScript, the changes are not being reflected visually. The code validates correctly and the console confirms that the rectangles are selected, but the color remains unchanged. Can anyone offer suggestions on what might be wrong and how to rectify it? Thank you in advance!
Here is an example of my HTML code:
<rect id="rect1" width="40" height="230" x="20" y="170" rx="10"/>
<rect id="rect2" width="40" height="300" x="60" y="100" rx="10"/>Below is my JavaScript code:
var rect1 = document.getElementById("rect1");
console.log(rect1);
rect1.setAttribute("style", "color: red");