Create a toggle effect using attribute selectors in CSS and JavaScript

I am looking to switch the "fill: #000;" from the CSS property "svg [id^='_']".

Usually, I would use a method like this, but it seems that I can't do so because "svg [id^='_']" is not an element, correct?

pub.toggleClass = function(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);

    el.className = classes.join(' ');
  }
};

However, when attempting to toggleClass, I encounter the error "Uncaught TypeError: Cannot read property 'split' of undefined"...

My attempt at using 

document.styleSheets[1].addRule("svg [id^='_']", 'fill: #000;');
has not been effective across different browsers and is failing to toggle... Could there be a simpler solution for this task?

Update 1

I will experiment with this library: https://github.com/Box9/jss

javascriptcsssvg

Answer №1

Utilizing toggleClass was successful for me by incorporating the attribute selector within the class I wanted to add. Instead of attempting to incorporate the style directly into the existing attribute selection, this approach proved to be much more straightforward.

.monotone [id^='_'] {
    fill: #000;
}

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

How can I combine an onkeypress and onclick event listener in one method?

I have two inquiries, somewhat intertwined. 1) Is it feasible to merge the 2 functions below into a more efficient function, or do I need to create a function and then call it in both event listeners? input.addEventListener("keyup", () => { if (eve ...

javascripthtmladdeventlistener

WebPack bundling causing issues with Knockout Validation

I am developing a web application using Knockout along with the Knockout-Validation plugin, and I want to utilize WebPack for bundling. However, I encountered an issue where Knockout-Validation seems to break when incorporated with WebPack. To illustrate ...

javascriptknockout.jswebpackknockout-validation

Fulfill the promise once the callback has been triggered

In my code, I am working on preventing the method _saveAddress from being executed multiple times. To achieve this, I have created a promise for the method. const [pressEventDisabled, setPressEventDisabled] = useState(false); <TouchableOpacity style={s ...

javascriptreactjstypescriptreact-nativeasync-await

The Magic of Javascript Routing with Regex Implementation

I'm currently developing a Javascript Router similar to Backbone, Sammy, and Spin. However, my specific requirements are rather straightforward. I need the ability to define a series of routes along with their corresponding callbacks, and I want to be ...

javascriptajaxregexrouter

Displaying the output of a PHP script in an AJAX request

I am trying to display feedback from certain checks, like checking if a file already exists, after making an ajax call to upload a file using my script. However, for some reason, I can't get the response to show up. Why is the response not appearing? ...

javascriptphpjqueryajax

Leveraging jQuery plugin within a React ecosystem

While utilizing semantic react, I found myself in need of a date picker. Fortunately, I stumbled upon this library: https://github.com/mdehoog/Semantic-UI-Calendar However, I am unsure how to incorporate it into my react-based project since it's not ...

javascriptreactjsnpm

Generate text input fields dynamically and store their values in an array using the Backbone.js framework

Is there a way to dynamically create text boxes based on a number input field with type='number'? Essentially, every time a user increments the number input, a new text box should be added to the backbone.js view. Additionally, when values are en ...

javascriptarraysdynamicbackbone.jsinput

Enabling and disabling multiple input fields based on the status of a checkbox in order to manage dynamic inputs

I need help with a situation involving dynamic input fields and checkboxes. My goal is to disable the input field if the checkbox with the corresponding ID is checked. Here is the PHP code snippet: <table class="table table-striped"> <thead& ...

javascriptphpjqueryhtmlcheckbox

React hooks eliminating unnecessary rendering

Having recently delved into React and hooks, I'm facing an issue with refreshing the list of files in my app after clicking on the convert button. The correct file only shows up if I manually refresh the page. The React part of the code involves uplo ...

javascriptnode.jsreactjsreact-hooksexceljs

Using private members to create getter and setter in TypeScript

Recently, I developed a unique auto getter and setter in JavaScript which you can view here. However, I am currently unsure of how to implement this functionality in TypeScript. I am interested in creating an Object Oriented version of this feature if it ...

javascriptooptypescriptgetter-setter

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

javascripthtml

Optimizing the particle rendering speed for HTML5 <canvas> elements

Currently conducting an experiment to enhance the maximum particle count before frame-rates begin to decrease in HTML5 Canvas. Utilizing requestAnimationFrame and employing drawImage from a canvas as it appears to be the most efficient method for image re ...

javascripthtmlhtml5-canvasspritewebgl

Is there a single code that can transform all standard forms into AJAX forms effortlessly?

When manipulating my 'login' form, I love using this code to submit it to the specified url and display the response in the designated id. The method of submission is defined as well. It's a great solution, but is there a way to streamline ...

javascriptjqueryajaxforms

What is the cost associated with using the require() function in an Express.js application?

I have a web application built with Express.js that serves one of my domains. The structure of the app.js file is as follows: var express = require('express'); var app = express(); // and so on… To incorporate one of my custom functions in t ...

javascriptnode.jsexpress

"Invalid operation" error encountered within a Flask function in Python

I am trying to store a 'person' resource in a .ttl file using a JavaScript function: Here is my SPARQL query: @app.route('/registraAnnotatore/<author>+<mail>', methods=['POST']) def registraAnnotatore(author, ...

javascriptpythonajaxsparqlsemantic-web

Error message: Laravel unable to locate requested page

Attempting to make a post request using AngularJS in Laravel, I encountered the following error message: Oops! The page you are trying to access could not be found. JAVASCRIPT app.controller('main',['$scope','$http',&apos ...

javascriptphpangularjsajaxlaravel-5

Using PHP Escape Functions in JavaScript

Can anyone help me with displaying item descriptions retrieved from a database query? Here is the code snippet that should display the description along with other details... <?php $type = "item"; $limit = 16; $preparedStatement = $SQL->prepare(& ...

javascriptphpmysqlpdo

(React Native) Creating a visually appealing grid layout for displaying an array of item cards

I am working with two arrays named 'word' and 'definition' export default class Dictionary extends React.Component { constructor(props) { super(props); this.state = { word: [], definition:[], index: ...

javascriptreactjsmobilenative

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

javascripthtmljqueryif-statementtext

How to iterate through two objects simultaneously using a directive in Angular and Vue.js

I am facing a challenge with creating an Angular directive that can iterate over a data object and display its values along with the values of a second unrelated object with similar structure. Currently, I am developing a translation app where the origina ...

javascriptjsonangularjsvue.js