How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs.

Is there a way to achieve this using my existing JavaScript?

var removeCurveStroke = document.querySelector('.test');

if(removeCurveStroke.classList.contains('card-decorator-stroke')){
    removeCurveStroke.classList.remove("card-decorator-stroke");
    removeCurveStroke.classList.add("brand-curve-stroke");
}

Any assistance on this matter would be greatly appreciated. Thank you

javascripthtmlcss

Answer №1

Try using 

document.querySelectorAll('.test');
Check out the documentation for querySelectorAll

document.querySelectorAll('.card-decorator-stroke').forEach(function(removeCurveStroke) {
   removeCurveStroke.classList.remove("card-decorator-stroke");
   removeCurveStroke.classList.add("brand-curve-stroke");
});
.test{
 height: 1rem;
 background: blue;
}
.card-decorator-stroke {
  background: red;
}
.brand-curve-stroke {
  background: green;
}
 
<div class="test"></div>
<div class="test card-decorator-stroke"></div>

Answer №2

It may not be the best option, but you could experiment with using 

document.getElementsByClassName("test")

Answer №3

If you want to add some flair, consider using JQuery:

$(".test .card-decorator-stroke").addClass("brand-curve-stroke").removeClass("card-decorator-stroke");

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

Ensure that the promise is fulfilled only if a specific condition is met

I have a complex if-else condition in my code that includes different promises. Once the logic determines which condition to enter and executes the corresponding promise, I need to ensure that a final promise is always executed. if (a < 5) { vm.pr ...

javascriptangularjs

Incorporate gulp-clean-css into the current gulpfile.js

I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...

cssnode.jswordpressnpmgulp-clean-css

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...

phpjavascripthtml

displaying data once "other" is chosen from a dynamic chart

I am having an issue with a dynamic table where I have a dropdown list with the option "other", and I want to display additional input when "other" is selected. Currently, the function I have only hides the input that is always visible and does not show ...

javascriptjquery

Unable to access an element using jquery

This is an example of an HTML file: <div id ="main"> </div> Here is the JavaScript code: //creating a new div element var divElem = $('<div class="divText"></div>'); //creating an input element inside the div var i ...

javascriptjquery

The response body from the HTTP request is consistently empty or undefined

While working with two containers managed by Docker Compose, I encountered an issue where the response body from a GET call made by a Node.js service in one container to an API in another container using the request module was consistently empty or undefin ...

javascriptnode.jsdockerexpressdocker-compose

Bespoke email solution for Woocommerce on the Wordpress platform

I have developed a unique HTML template with inline styles for the 'customer processing order' email notification in Woocommerce. I stored the template in my themes folder at woocommerce/templates/emails/customer-processing-order.php. However, I ...

phphtmlwordpressemailwoocommerce

Tips for setting up a proxy with an enum

I am facing an issue with setting up a Proxy for an enum. Specifically, I have an enum where I want to assign a value to this.status using a Proxy. However, despite my expectations, the output "I have been set" does not appear in the console. Can anyone ex ...

javascripttypescriptenums

vue-form and vue-material are not compatible with each other

In my experience, using a Vue form on a regular HTML <input> element allows validation to work as expected. However, when I switch to using the <md-input> element, the validation no longer functions and an error message is displayed: Element ...

javascriptvue-material

My type is slipping away with Typescript and text conversion to lowercase

Here is a simplified version of the issue I'm facing: const demo = { aaa: 'aaa', bbb: 'bbb', } const input = 'AAA' console.log(demo[input.toLowerCase()]) Playground While plain JS works fine by converting &apo ...

javascripttypescript

What is the best way to retrieve the current state from a different component?

My goal is to access a user set in another component. I passed the state from the highest component (which is the app) by utilizing this function for state change. handleRegisterSubmit(e, username, password) { e.preventDefault(); axios.post('/au ...

javascriptnode.jsreactjsreact-nativereact-router

Struggling to transfer information from JavaScript to Python Flask?

I am currently working on a basic configuration where I need to send a string to my Flask application through Ajax, but unfortunately, I am encountering Error code 400: Bad request. Here is the JavaScript code snippet: headers = { 'Content-type&a ...

javascriptpythonajaxflask

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: However, I have come across the md-input-content tag, which occupies less ...

javascriptcssangularjshtmlangular-material

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

javascriptjqueryhtml

PHP isn't sending data (even though the name tag is defined)

After reviewing numerous posts where individuals forget to include the name attribute in their input tags, I came up with a simple script: <form action="submit_form.php" method="post"> Name: <input type="text" name="name"><br> ...

htmlpostphpstormphp

Superimpose above the tbody

I am attempting to implement a loading overlay specifically on top of the tbody element. My current method involves adding a tr as the last child of tbody and positioning it using position: absolute, while setting the parent tbody with position: relative. ...

htmlcss

Using `ngModel` within `ngOptions` inside `ngRepeat`

<p><b>Customer Name</b></p> <div ng-repeat="customer in customerList"> <b>{{customer.name}}</b> <select value="Please choose a bot from the list" ng-model='???' ng-options="b as b.name for b in lis ...

javascriptangularjsangularjs-ng-repeatng-options

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

javascripthtmljsonobject

Incorporating middleware to handle 404 errors in Express

scenario app.use("/api/tobaccos", tobaccos); app.use(function(err, req, res, next) { console.error(err.message); }); API details: router.get("/:id", async (req, res) => { console.log("GET TOBACCO:" + req.params.id); ...

javascriptnode.jsexpressmiddleware

The JSP AJAX response comes back empty

I am encountering an issue where I am using JQuery Ajax to call a REST API in JSP, but it keeps returning null no matter how I try. Strangely enough, the same code works when used in HTML. I have been searching online for a solution but haven't found ...

javascriptjqueryajaxjspnull