Is there a way to have the radio button change color automatically once clicked?

Here is the current svg chart that I am working with

https://i.sstatic.net/aky0d.png

I am looking to have the box automatically filled in black when a radio button is clicked.

https://i.sstatic.net/koic6.png

This is the svg code representing the box:

<svg class="teeth" id="svg" 
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />

<input type="radio" name="browser" value="Y" id="answer">


    </g>

</svg>

Is there a way to make the box change to black when the radio button is clicked?

javascriptjqueryhtmlcsssvg

Answer №1

To start, you'll want to select the specific elements within the SVG that need updating. It seems like you are targeting all polygon and rect elements.

Once you have identified those elements, you can manipulate their appearance using the fill property.

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') );
  }
});
<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>
<input type="radio" name="browser" value="Y" id="answer">

It's important to note that your input element should be placed outside of the SVG container. If you wish to center it, you may need to apply absolute positioning for alignment.

Furthermore, achieving the same effect without JavaScript is possible by utilizing the :checked selector. In this case, the input element must precede the SVG in the DOM hierarchy or rearrange your elements accordingly (unless you're working with scss which offers flexibility).

For instance:

input:checked + svg rect,
input:checked + svg polygon {
  fill: red;
}
<input type="radio" name="browser" value="Y" id="answer">

<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges encountered on Chrome browser when using label:hover along with relative positioning

Currently, I am in the process of creating a price list for a section of a website I'm developing. To make it interactive, I am utilizing checkbox type inputs along with labels so that users can select the services they desire, and the webpage will au ...

cssgoogle-chromehoverpositioningcss-position

The Ajax request is failing to communicate with the server

I am currently delving into the realm of Ajax and jQuery on a website I am working on. As someone new to Ajax, I have encountered a challenge. The webpage in question is a basic registration form where I aim to verify if the user's email address is al ...

phpajaxapachejquery

Tips for sending an input file to an input file multiple times

As a developer, I am facing a challenge with a file input on my webpage. The client can add an image using this input, which then creates an img element through the DOM. However, I have only one file input and need to send multiple images to a file.php i ...

javascriptphpjquerybackend

When launching the VueJS app in the browser, I am encountering a blank screen with no visible errors. What could be causing this issue?

I've recently embarked on a Vue.js app development journey and everything seems to be in order, except for the fact that the page displays as completely blank in the browser. There are no error messages in the terminal either. Despite my efforts to re ...

javascriptvue.js

JavaScript utilized for a cutting-edge ShuttleBox system integration

Currently, I am on the hunt for a unique piece of javascript that can bring ShuttleBox-like functionality into my project. Essentially, what I require is to have 2 list boxes and 4 buttons - Move Left, Move Right, Move All to Left, and Move All to Right. ...

javascript

What is the best way to obtain the output produced by a function when a button is clicked

When I click on a button, the desired action is to trigger a function that adds a new property inside an object within a large array of multiple objects. This function then eventually returns a new array. How can I access and utilize this new array? I am ...

javascriptreactjsfunctionusecallback

Module 'require' not found

Displayed below is the error message: E:\freelancer-work-backup\scraping>node index.js Screenshot of error $ node index module.js:341 throw err; ^ Error: Cannot find module 'require' at Function.Module._resolveFilenam ...

javascriptnode.jsexpressmean-stack

What causes the DOM to be updated upon each opening of the browser extension for Chrome?

Here is the default position: https://i.stack.imgur.com/tkWCA.png After checking it: https://i.stack.imgur.com/tdzbg.png When I click anywhere on the page to hide the dom extension output (without showing popup.html); However, when I reopen the extens ...

javascriptgoogle-chrome-extensionmanifest.json

Applying the jqtransform plugin to all forms except for one

We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...

javascriptcssformsjqtransform

Numerous levels of nested closures working alongside synchronous JavaScript code

After receiving an explanatory answer to my previous inquiry, I realize that my initial question lacked sufficient context to address my current situation effectively. Let me present a specific route within my Express application: var eventbriteService = ...

javascriptnode.jsclosuressynchronous

Guide to executing drag and drop functionality within an svg element using selenium?

[The image below shows a page element that I am trying to drag and drop into an SVG element. I have attempted using the action class and robot class, but have not been successful. resizeblockTwo']"> <div class="chartCanvas js-resizeblockOne d ...

seleniumsvg

Recurly.js: Enhancing PHP Integration with Advanced Digital Signatures

I've been working on setting up forms for a recurly implementation and using PHP to generate the signature. Despite following the documentation, searching for examples, and testing various combinations, I'm facing an issue where part of the PHP c ...

javascriptphpsignaturerecurly

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

javascriptjqueryhtmlcsspopupwindow

The sequence in which arguments are executed in the console.log() function

After running tests on both CodeAcademy's editor and Chrome's console, I came across an interesting observation. I noticed that the argument of console.log() is not evaluated first even if it is an expression. Why does this happen? var x = 0; co ...

javascriptconsole

Incorporating form elements into a Bootstrap pop-over using jQuery AJAX functionality

I am currently working on a webpage that utilizes Bootstrap. My goal is to have users input two pieces of data into a popover similar to a log-in form. The issue arises when I attempt to dynamically create these elements using jQuery. It seems that jQuery ...

javascriptjqueryhtml

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

I am faced with a unique design challenge where I am utilizing the MatCardComponent and each card contains a table. I would like to incorporate a floating label within the border gap similar to what is seen in MatFormField. https://i.stack.imgur.com/51LBj ...

cssangularcustomizationmat-form-fieldmat-card

Modify the theme color within Luna Admin Template

I'm working on customizing an admin template with a dark background color, but I've been struggling to change it to a light/white color for hours. You can find the template here. I also submitted a question on the sales page, but I haven't ...

htmlcsstemplatesadminresponsive

Utilizing AngularJS to include information into JSON-LD

As a newcomer to AngularJS, I find myself stuck in one of my projects. My goal is to convert the user-entered data in a form into the format: << "schema:data" >> and then push and display it within the @graph of the json-ld. Here are my HTML an ...

javascriptjsonangularjshtmlweb

Can multiple AJAX responses be received at the same time from the PHP server?

Looking to create a progress bar on my website to track the execution of a PHP script. The PHP script establishes connections with Google API, storing received data in the database. This process may take up to a minute at times. The PHP script is located ...

javascriptphpjqueryajaxprogress-bar

Could someone provide a detailed explanation of exhaustMap in the context of Angular using rxjs?

import { HttpHandler, HttpInterceptor, HttpParams, HttpRequest, } from '@angular/common/http'; import { Injectable } from '@core/services/auth.service'; import { exhaustMap, take } from 'rxjs/operators'; import { Authe ...

javascriptangularangularjstypescriptrxjs