After adding a new class, NextJS fails to style the div appropriately

Currently, I am working on the front-end using the NextJS framework. When a user clicks a specific button, a class is supposed to be added to a particular div which will then change the style of the div based on unique styles defined in my CSS file.

The original element:

<div class="Home_wordBlockWrapper__nwyZO" id="generated-block"><h3>C</h3></div>

The element after clicking the button:

<div class="Home_wordBlockWrapper__nwyZO filled rightindex" id="generated-block"><h3>C</h3></div>

CSS File:

.wordBlockWrapper {
  border: 2px solid rgb(226, 232, 240); 
  border-radius: 5px;
  width: 50px;
  height: 50px;
}

.wordBlockWrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  transition: .5 ease-in-out;
}

.filled {
  border: 2px solid black;
}

The issue I'm facing is that even though the class is successfully added, the style of the div doesn't change as expected. Can anyone help me identify where the error might be?

javascripthtmljquerycssnext.js

Answer №1

My question wasn't resolved in the usual way, but I found a solution that worked for me: Instead of adding a class to the element and then styling it in the CSS file, I wrote a JavaScript script to apply the styles directly to the document element by getting it using its ID.

Here is my solution:

var tb = document.getElementsByClassName(styles.wordBlockWrapper)[matching.index]
var targBlockId = document.getElementById(tb.id);
  
if(targBlockId !== null) {
    targBlockId.style.backgroundColor = "#13d178"
    targBlockId.style.color = "#fff"
}

This approach fixed the issue by applying styles with the JavaScript script instead of adding a class to the element and styling it with CSS files.

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

Utilize a standard PHP script for every subdirectory within a domain

I'm currently working on a website and the design I'm using involves changing the URL in the address bar using the history API when the page content changes through JavaScript and AJAX. However, I also want each "page" of the website to be access ...

javascriptphpjqueryajaxhtml

Show results based on the selection of multiple checkboxes upon submission

When creating PHP pages to fetch data from databases, each checkbox is linked to a different page. I want to be able to check one or multiple checkboxes and then click the submit button to display the PHP pages that are linked to the checked checkboxes. Ho ...

phphtmlajaxjscript

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

I am trying to input a decimal number with 1 and one zero like 1.0 <input type="number" formControlName="global_velocity_weight" /> this.form = this.fb.group({ global_velocity_weight: new FormControl(1.0, { validators: [Valida ...

javascripthtmlangulartypescriptangular-reactive-forms

Maintain constant positioning of the gltf model slightly ahead of the player as they move in the A-frame

Is there a way to make a gltf model in A-frame () follow the player slightly in front and at eye level to the camera? I want the model to always be in front of the player and at their eye level, so it moves along with the player's movements. How can t ...

javascriptjquerythree.jsaframewebvr

Is it possible for a route's URL in ui-router to be at the same level as another state while also utilizing $stateParams?

In my application, I want to implement a feature where hitting the same level of the URL will lead to either the baz state or the biz state with a parameter. angular.module('foo') .config(function($stateProvider){ $stateProvider .state(&apos ...

javascriptangularjsangular-ui-router

Exploring Nodejs and delving into fundamental queries

As I delved into the world of Nodejs, I quickly realized that my knowledge was limited to just being a user. Transitioning to creating my own server posed challenges that were not easily resolved by online tutorials. This led me here seeking guidance to tr ...

phpjavascriptnode.js

Is there a substitute for PHP json_decode since it is not supported?

My current hosting provider does not have support for json_decode, so I need to come up with an alternative solution to achieve the same effect without using JSON. Below is the code that needs modification: jQuery: var allLocations = []; $(".loc ...

phpjqueryajaxjson

Searching through dynamic tables using jQuery quicksearch

After making an ajax call, I am in the process of creating a table with a unique ID. The data rows are being retrieved from the database and then used to create a dynamic table with that generated ID for display purposes. However, I also need to implemen ...

ajaxjquery

Collaboratively accessing a shared constant in two separate JavaScript files

I am diving into the world of JavaScript and Node.js. I am currently experimenting with Puppeteer to extract the text value of a tag and store it in a constant variable. However, I am encountering difficulties when trying to integrate this value into my ...

javascriptnode.jsmocha.jsasync.js

Interested in performing CRUD operations individually for both the parent grid and child grid?

$(function() { $("#jqGrid").jqGrid({ url: "/Student/GetStudents", datatype: 'json', mtype: 'Get', colNames: ['StudentId', 'FirstName', 'LastName', 'Gender', &a ...

jqueryasp.net-mvcjqgridcrudsubgrid

Tips for sorting data by date in Angular 4

Seeking guidance on how to filter records in a table based on the date column. The current filtering code is generating an error message: ERROR TypeError: Cannot read property 'indexOf' of null temp = [{ "firstName":"Ravi", "date":"2019-04-0 ...

javascriptangular

Tips on incorporating dynamically appended table rows from javascript post button click in asp.net

After dynamically adding rows based on the selected number, I am facing issues with retrieving data from these rows when trying to submit it to the database. Upon Button Click, only the header row predefined in the HTML file is returned. Is there a way to ...

javascriptc#jqueryhtmlasp.net

Insert a new row into the table with a value that is taken from the input fields on the form

view image details I am working on a form that consists of 4 fields: Name, Last name, email, and role. There is also a button. When the button is clicked, the input from the above form should be added as a new row in a table below. ...

htmlangularforms

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

javascriptreactjs

Using setAttribute will convert the attribute name to lowercase

When creating elements, I use the following code: var l = document.createElement("label");. I then assign attributes with l.setAttribute("formControlName","e");. However, a problem arises where the setAttribute method converts formControlName to lowercase ...

javascripthtmlangularformsdom

Setting a closure to encapsulate a global variable

I possess a set of functions that allow me to configure prompts for when someone exits a page while inputting values. However, my main concern lies in how to properly encapsulate the checkFlag. Currently, checkFlag is being treated as a global variable whi ...

javascripthtmlcss

Discovering the source of the parent link within html.tpl.php

Is there a way to determine the parent page title within html.tpl.php? I need this information to change the background image based on the selected parent link. Here is the URL for reference: Thank you, Ron I couldn't find a solution to this problem ...

phphtmlapidrupalbackground

What is the process of sending data to another JSP page via AJAX when submitting data to a link within a JSP page?

I am facing an issue with forwarding data from a URL link in a JSP form page to another JSP page after submitting the form. How can I achieve this successfully? index.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

javascriptjqueryajaxapijsp

"Uncovering the dangers of XMLHttpRequest: How automatic web-page refresh can lead

Hello, I have been developing a web interface for some hardware that utilizes an 8-bit microcontroller. The webpage includes HTML, JavaScript, JSON, and XHR (XMLHttpRequest) for communication purposes. My goal is to create a page that updates every 250 ...

javascriptajaxjsonmemory-leaksxmlhttprequest

The code is functional with regular arrays, however, it does not support multidimensional arrays

Currently, I am working on developing a Holdem hand evaluator which requires me to create a function that calculates the number of possible combinations of 5 cards from a selection of 7 cards. I have successfully written the "pickNofSet()" function to achi ...

javascriptarraysmultidimensional-array