The querySelectorAll function will choose all classes that are identical

My calendar design utilizes three different classes to style its child elements: "old day", "day", and "new day". However, I am facing an issue where using querySelectorAll with the class name "day" also captures the other two classes. This becomes problematic when trying to specifically target only the "day" class without selecting "old day" or "new day."

t = document.getElementByTagName('table');
d = t.item(0).querySelectorAll('.day');

for (i = 0; i < d.length: i ++) {
     if(d[i].textContent == 28) {
         d[i].click();
     }
}

This leads to clicking on the old month's 28th instead of the current month's 28th. How can I accurately select only the "day" class of td element without unintentionally including "old day" and "new day"?

Answer №1

To target specific classes to exclude, you can utilize the :not selector in CSS.

document.querySelectorAll(".red:not(.big):not(.small)").forEach(e => {
  e.style.marginLeft = "100px";
});
.red {color: red;}
.big {font-size: 20px}
.small {font-size: 12px}
<a class="red">red</a><br>
<a class="red big">red big</a><br>
<a class="red small">red small</a>

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

<audio> remove visible download options

Is there a way to customize the audio controls and remove the download button while keeping the play/pause and volume controls visible? I want to restrict users from downloading the audio files. Here's my current code snippet: <audio controls> ...

Clicking on a link with an onclick method renders selenium ineffective in producing any action

The specified element is: <a href="#" onclick="submitViaAjax(null, url);return false;">Add</a> After using element.click() to try clicking the link, the onclick method fails to execute. Is there a way to ensure the method is executed success ...

Modifying source dynamically in Javascript file through web.config during runtime

I have the following code snippet: <script type="text/javascript" src="path?key=1234567890"> </script> Additionally, I included the following in my web.config file: <appSettings> <add key="key" value="1234567890"/> Now, ho ...

JavaScript class encounters error: property 'store' is undefined

Recently, I created a handy convenience class to streamline all the email validation processes throughout our application. However, upon running it, an error message pops up in the console: Cannot read property 'store' of undefined It seems ...

Leveraging .col-* within a .d-flex container in Bootstrap 4

What is the recommended practice for using .col-* as children in a .d-flex container? Should .d-flex be used with .row instead? I have noticed that the Bootstrap 4 Docs do not show any examples of using a .col-* in a .d-flex container. The layouts provide ...

Exploring the power of the JavaScript this keyword

Can you explain the purpose of the line this.tasks = tasks; in relation to the constructor method? class TaskCollection { constructor(tasks =[]) { this.tasks = tasks; } } ...

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

Having trouble understanding why my submission button isn't working

I'm struggling to understand why my submit button isn't working correctly. Initially, I had an e.preventDefault() at the beginning and it didn't have any effect. However, after receiving advice from an instructor, I included it in the condit ...

Encountering a Bad Request error when making a POST request with Axios and dealing with CORS in a Django and

I encountered a successful post request when using Postman to the URL http://localhost:8000/api/auth/users/. However, attempting the same request on my React front end resulted in a 400 (bad request error) along with an Uncaught Promise Error stating "Requ ...

When trying to access the ShadowRoot in Firefox using Selenium, an error is thrown: JavaScriptException - Cyclic object

I'm currently working on automating the Space Invaders game on www.freeinvaders.org using Python and Selenium. The game itself is operated through an HTML5 canvas element enclosed within a shadow-root. Referencing a solution provided in this thread, ...

On mobile devices, the code "location.assign(url)" may occasionally redirect to an incorrect URL, despite functioning correctly in the majority of instances

After setting up a page with a timeout that should automatically redirect to a specific URL after 60 minutes, I encountered an issue where the redirection sometimes leads to a loss of parameters in the URL. The JavaScript code added for this purpose is set ...

A complex valueOf function in Javascript

What is the purpose of using ({}).valueOf.call(myvar)? This expression converts any value to an object. If the input is already an object, it remains unchanged; however, if it is a primitive type, it gets converted to an instance of a wrapper type. I ...

What is the best way for JavaScript to wait for a click function to finish before repeating the same function when the user clicks again

I have created a simple text-based game using HTML where the player wants to sell their item. <input name="gg1" id="gg1" value="10"> <a href="javascript:;" onclick="fastbtn(1);">Sale</a> <script> function fastbtn(sid){ var aa = ...

Prevent postback from ImageButton OnCommand by utilizing JavaScript in asp.net 4.0 specifically for Internet Explorer

It seems like the Internet Explorer issue has resurfaced, and I'm struggling to resolve it: I have an ImageButton set up with OnCommand to delete a specific entry from my database. However, I've added a confirmation step for the user before dele ...

Unable to get Angular ng-click to function properly when used in conjunction with $

I am encountering an issue with triggering a click event in my Angular app using code similar to the example below. Can anyone help me understand why the event is not being triggered? var app = angular.module("myApp", []) app.directive('myTop', ...

Is there a method to extract the y value for a specific x value that is not part of the current data set in a Chart.js graph

I have a set of data points like { x: 5, y: 10 }, { x: 10, y: 15 }, { x: 20, y: 25 }. With Chart.js, I can easily create a chart based on these points. Is there a method to retrieve the y value for a specific x value, such as 13, from the rendered chart? ...

Issue with CSS/JS resolved: figured out a way to create a page/menu that overlaps with their individual scrollbars

I am encountering an issue with a scrollbar that is related to a fullscreen menu appearing on a page and causing the page scrollbar to reset due to a display: none property. The images below provide a visual representation of the problem: Below is the Ty ...

Replace the term "controlled" with "unleashed" when utilizing the file type input

In my app, I have defined multiple states like this: const [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''}) And to get an image from my device, I am using the following input: &l ...

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

After creating an application using NextJs, I successfully built it and ran it on a node server by executing 'npm run start' in Powershell. Everything works perfectly when accessing it locally through port 80. However, my Windows Server 2019 does ...

How can I prevent further input in an input field after making a selection from mat autocomplete in angular?

Hello everyone, I am looking to disable the input field after selecting a value from the drop-down. Additionally, I want to be able to reset the selected value using a reset button. If you need a reference, you can check out Stackblitz: https://stackblitz ...