How to add color automatically when the radio button is already clicked?

Question

This is my current svg chart

This is I want If the radio button is clicked the box will be automatically filled by black.

This is my svg code for box

Can anyone help how to fill out the box by color black when the radio button is already clicked?

user_2415802 · Answer

You first need to get the elements in the SVG that you want to update. In your case, it looks like your after all polygons and rect elements.

Once you have that, you can use the fill property to color the elements.

const radioButton = document.getElementById('answer');
radioButton.addEventListener('change', e => {
  if (e.target.value === 'Y') {
    const polygons = document.querySelectorAll('svg polygon, svg rect');
    polygons.forEach(p => p.setAttribute('fill', 'red') );
  }
});

As mentioned in the comments, you need to put your input element outside of the SVG. If you want it in the center, you'll have to do some absolute positioning to make that happen.

Additionally, you can do this without JavaScript by using the :checked selector. However, if you do this, you will need to move your input element above your SVG (unless you're using scss, you can change up the selector).

Example:

input:checked + svg rect,
input:checked + svg polygon {
  fill: red;
}

How to add color automatically when the radio button is already clicked?

1 Answers