Using Javascript to detect the existence of a class and execute a function or make changes

Hey there, all you amazing folks! I'm currently working on designing my game using Javascript.

One of the elements is a box with the ID 'box1'. There's also a hidden button component. I've created a function to alter the class of box1.

I aim to adjust the visibility based on whether box1 has the "glow" class. In fact, I'll be checking the classes of 9 different boxes. This might involve using the "if" condition with "&&".

$(document).ready(function() {
  if (document.$('#box1').classList.contains('.glow')) {
    $(".btn-warning").css('visibility', 'visible');
}});
javascripthtmljquerycss

Answer №1

One way to approach this is by customizing your code

You have a total of 9 blocks, labeled as box1, box2, and so forth

Create a loop to iterate through all the class nodes

$("div[id^='box']").each(function(){
  if($(this).hasClass(".glow"))
  {
  // Add your specific logic here
  $(".btn-warning").css('visibility', 'visible');
  }
}

Fingers crossed that this solution will meet your needs!

Answer №2

Appreciate all the feedback from everyone. I have made some adjustments to my approach.

I successfully completed the code on my own.

The gameboxsize represents the container for 9boxes.

setInterval(function() {
  var gamebox = document.getElementById('gameboxsize');
  var nodesSameClass = gamebox.getElementsByClassName('glow');
  console.log(nodesSameClass.length);
  var winNum = nodesSameClass.length;

  if (winNum === 9) {
    $(".btn-warning").css('visibility', 'visible');
  }
});

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

When including a JSON file, Angular 8 does not recognize the rootDir

After including a JSON file in my library, I encountered an error during the build process stating that the my.json file is not located under rootDir. ...

javascriptjsonangular

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

javascriptjqueryhtmlcss

What could be causing my mobile page to require two scrolls?

I've encountered a peculiar issue where users need to scroll twice or the page gets stuck on mobile devices that are less than 600px wide. I've attempted the following solutions with no success. I am a complete novice, so please excuse my lack of ...

htmlcssbootstrap-4shopify

What is the best way to store HTML code in a SQL Server database to ensure proper rendering?

My website is currently in development and is similar to Stack Overflow. I am using a simple textarea for text input as opposed to a WMD editor like the one used on Stack Overflow. When I enter HTML code as input and store it in my database table under a ...

javahtmlsqlsql-server

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

javascripthtmlcss

I am encountering difficulties with hosting a project that was created using Next.js

I am currently working on a Next.js project and I encountered some version compatibility issues when integrating MUI. While my project runs smoothly in localhost, it fails to work when deployed in hosting. I attempted to resolve this by using the --legacy ...

javascriptreactjsmaterial-uivercel

Customize your Shopify Messenger icon using JavaScript!

Shopify recently introduced a new feature that allows customers to contact store owners through messenger. My client has requested me to customize the appearance of this icon with their branded icon instead. https://i.stack.imgur.com/uytpd.png I have not ...

javascriptshopify

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

I have a lightweight and easy-to-understand code for a website project with two panels. The first panel on the left is a large navigation (270px width, top to bottom, similar to a wiki) with approximately 30 unordered list items. Next to it is the second ...

javascripthtmljquerycsssidebar

Reload the Node.js webpage

Is there a method to automatically refresh a Node.js page following a socket.io event? var messageDynamic = "Initial status"; app.get("/", function(request, response) { response.setHeader('Content-Type', 'text/plain'); respons ...

javascriptnode.js

What is the proper way to use Object.entries with my specific type?

On my form, I have three fields (sku, sku_variation, name) that I want to use for creating a new product. I thought of converting the parsedData to unknown first, but it seems like a bad practice. export type TProduct = { id: string, sku: number ...

javascriptreactjstypescript

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Is there a way to replace the if else statement in the function using a Ternary operator in JavaScript? private getProductName(productType: string): string { let productName = 'Product not found'; this.deal.packages.find(p => p.isSele ...

javascripttypescriptconditional-operator

Need help using JQuery to set the focus on the initial <select> element on a webpage?

Upon loading the page, I am looking to set focus on the initial element through JQuery. So far, I have managed to achieve this by using: $(":input:visible:first").focus(); or $(':input:enabled:visible:first').focus(); as described in a helpf ...

jqueryhtml

Troubleshooting Bootstrap: Identifying errors in my bootstrap code

Could you help me diagnose the issue with this code? I have tailored it to be responsive on my tablet by using 12 columns for two divs, expecting the third div to be in a new row. However, upon checking my index.html on the tablet, all the divs are display ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

I have implemented Angular in my web application, but unfortunately it is not mobile responsive. In order to address this issue, I would like to disable the mobile view and instead display a message informing users that mobile view is not supported for t ...

cssresponsive-design

Refresh Form Following Submission

When using a react form that triggers a graphql mutation upon button click, the text entered in the form fields remains even after the mutation has been executed. This necessitates manual deletion of text for subsequent mutations to be run. Is there a way ...

javascriptreactjstypescriptmaterial-uiformik

Error: Attempted to search for 'height' using the 'in' operator in an undefined variable

I came across the following code snippet: $('.p1').click(function(){ var num = 10; var count = 0; var intv = setInterval(anim,800); function anim(){ count++; num--; ...

javascriptjquery

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

javascriptphpjqueryhtmlcss

Efficiently organizing dates in the Vuetify date range picker

I am working with a vuetify date range picker component and have the following code: <v-menu ref="effectiveDateMenu" v-model="effectiveDateMenu" :close-on-content-cl ...

javascriptvue.jsvuejs2vuetify.js

Can you please provide the Jquery alternative to this?

Can you provide a sleek jQuery solution for this problem? $('A').append(str); ...

javascriptjquery