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

Tips for altering the background of a video on Vonage

Hello everyone, Currently, I am incorporating the Vonage API for video calling into my project. I would like to tweak the video background - does anyone have any ideas on how to accomplish this? I eagerly await your responses! Thank you in advance! ...

javascriptcssvonage

Mastering parameter passing in Node.js functions: A comprehensive guide

As I embark on my journey with node js (refer to the question), please be patient as I navigate through this new territory. To clarify my query, I have developed a function to be invoked in another JS file: exports.test = function(req, res){ connection ...

javascriptnode.js

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Learn how to seamlessly update broken images on a webpage with a placeholder error image using the MooTools 1.2 framework

Currently working on a project with PHP, MySQL and utilizing Mootools 1.2 as the JavaScript framework. I am trying to find a way for all broken images to automatically be replaced with a designated error image. Any suggestions on how I can achieve this? ...

phpjavascriptmysqlmootools1.2

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

javascriptandroidandroid-webview

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss

Error: The request does not have the 'Access-Control-Allow-Origin' header

As a beginner in post requests, I've been encountering an error when attempting to make a post request. Despite searching for solutions, the answers are too complex for me to grasp how to adjust my code to resolve it. var url = 'http://unturnedb ...

javascriptajaxpostxmlhttprequest

Revamping elements according to ordered array. Angular version 4.3

Dealing with an array of data that needs to be sorted for displaying in a component seems to be a challenge. Despite having a functional code sample demonstrating the concept, the sorting is not reflected in the Angular app's DOM. The original data i ...

javascriptarraysangulartypescript

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

In the following code snippet, I am looking to send the id=content to the function mr and then display the result in the passed id=result. While this functionality is currently limited to this HTML file, I aim to extend it to other HTML pages by adding the ...

phpjavascriptajaxxmlhttprequest

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

javascriptjqueryhtmljson

I'm experiencing some issues with AwaitingReactions in Discord.js, it's not working properly on

I'm having trouble with implementing reaction awaiting as per the guide in discord.js. For some reason, it just doesn't seem to work on my end. No matter what I try, when I click the emoji, it doesn't register. I've scoured numerous Sta ...

javascriptnode.jsdiscorddiscord.js

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

Transitioning in CSS involves animating the changing of a CSS property over

My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits. transition: width 0.3s ease-in 1s; tra ...

csscss-transitions

connect the validation of forms to different components

I am currently working on components to facilitate the user addition process. Below is an example of my form component: createForm(): void { this.courseAddForm = this.formBuilder.group({ name: ['', [ Validators.required, ...

javascriptangulartypescript

Guide to setting up a custom js file in Laravel admin template

Currently working with Laravel 5.8 and utilizing the laravel-admin Template for administrative purposes. There are times when I require custom JavaScript and CSS files specifically for certain admin controllers. How can I include these JS and CSS in lara ...

javascriptcsslaravel-5laravel-admin

Package for running scripts in Node Package Manager

Currently, I am working on developing an npm package that will automatically insert a specific npm script into any package.json file that it is being used. Unfortunately, after going through the npm package.json/script documentation, I haven't been ab ...

javascriptnpm

What is the process for writing code in a recursive manner?

I'm in the process of converting these code snippets into smaller ones using recursion. However, I've hit a roadblock while trying to implement a for loop. The dictionary I am working with is: var structure = []; and it has the following structu ...

javascriptarraysjsondictionaryrecursion

What is the method for inserting an icon using createElement?

Can someone help me figure out how to create a Material-UI icon using JavaScript? I am currently using the Material-UI-icon library. import ThumbUpIcon from '@material-ui/icons/ThumbUp'; var thumbsup = document.createElement(ThumbUpIcon); Any ...

javascriptreactjsmaterial-ui

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility