Show a pop-up notification when the quantity in one set of cells matches the quantity in a different set of cells

Does anyone have a script that can show a popup message when the count of yellow cells matches the count of red cells? Here is a visual representation of what I'm looking for. Any assistance would be greatly appreciated.

https://i.sstatic.net/2bJsx.png

javascriptcsshtml

Answer №1

Make sure the classes assigned to your colored blocks are red_block and yellow_block

setInterval(function(){ 
 var reds = document.getElementByClassName('red_block')
 var yellows = document.getElementByClassName('yellow_block')
 if(reds.length == yellows.length){
   alert("do something here")
 }
}, 1);

document.getElementByClassName will give you an array of elements with that class

Set a time interval of 1ms to constantly monitor the values

Answer №2

Here is an example that demonstrates how to change the background color of table cells using jQuery:

$(document).ready(function () {

    var color = "White";
    $("#btnWhite").click(function () {
        color = "#FFFFFF"
    });
    $("#btnYellow").click(function () {
        color = "#FFFF00"
    });
    $("#btnRed").click(function () {
        color = "#FF0000"
    });
    $("#btnBlue").click(function () {
        color = "#0070C0"
    });
    $("#btnGreen").click(function () {
        color = "#00FF00"
    });

    $("table tr td").click(function () {
        $(this).css("background-color", color);
    });

});
        body {
            padding: 5px;
        }

        label {
            font-weight: bold;
        }

        input[type=button] {
            padding: 10px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }

        p {
            margin: 1em 0 0;
        }

        td.pz {
            border: thin solid #000000;
            width: 59px;
            height: 57px;
            background-color: #FFFFFF;
        }

        .red_block {
            border: thin solid #000000;
            width: 59px;
            height: 57px;
            background-color: #FF0000;
        }

        .yellow_block {
            border: thin solid #000000;
            width: 59px;
            height: 57px;
            background-color: #FFFF00;
        }

        td.padding {
            width: 59px;
            height: 57px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <br>
    <br>
    <input id="btnWhite" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFFFF; border: 1px dotted #999"
        value="">
    <input id="btnYellow" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFF00; border: 1px dotted #999"
        value="">
    <input id="btnRed" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FF0000; border: 1px dotted #999"
        value="">
    <input id="btnBlue" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #0070C0; border: 1px dotted #999"
        value="">
    <input id="btnGreen" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #00FF00; border: 1px dotted #999"
        value="">
    <br>
    <br>
    <table>
        <tr>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
        </tr>
        <tr>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
        </tr>
        <tr>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
        </tr>
        <tr>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
        </tr>
        <tr>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="yellow_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
            <td class="red_block"></td>
        </tr>
    </table>
</body>

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

Issue with the demo code for Vue Stripe Checkout

As I delve into the world of Vue-Stripe-Checkout, I encountered a snag right from the start with the demo code provided. The issue arises when utilizing the Vue Stripe Elements component. Has anyone else experienced this problem? There are no errors displa ...

javascriptvue.jsgithubstripe-paymentselement

Develop a list of findings from the search

Is there a way to extract the name from the image shown below? return testData.then((data) => { console.log(data) var results = []; var toSearch = params.suggestTerm; data = data["data"]["0"]; console.log(" ...

javascriptreactjs

Is there a way to retrieve the current map center coordinates using the getCenter function in @react-google-maps/api?

I am currently working with the GoogleMap component provided by @react-google-maps/api, but I am struggling to figure out how to obtain the latitude and longitude coordinates of the map's center after it has been moved. After some research, I came ac ...

javascriptreactjsreact-google-maps

Exploring AngularJS JSON Parsing Techniques (such as utilizing ng-repeat)

My approach to processing json data looks like this: $scope.activities = response.data; console.log($scope.activities.length); var list = []; for (var i = 0; i < $scope.activities.length; i++) { console.log($scope.activities[i].name); list.pus ...

javascriptangularjsjson

Adding client-side scripts to a web page in a Node.js environment

Currently, I am embarking on a project involving ts, node, and express. My primary query is whether there exists a method to incorporate typescript files into HTML/ejs that can be executed on the client side (allowing access to document e.t.c., similar to ...

javascriptnode.jstypescriptexpress

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Hey there! I have this show/hide script on my website that's been working well. However, there are a couple of things I need help with. I want to modify the script so that only one div can be shown at a time. When a div appears, I'd love for it ...

javascriptjqueryhtml

Share an image using only the publish_actions authorization

There are some apps I've come across that only request access to users_photos and publish_actions (not publish_stream or photo_upload). Surprisingly, they are able to upload photos without being approved for User Generated Photos (e.g. Instagram). Wh ...

htmlfacebookfacebook-opengraph

How to retrieve the value of a selected radio button in an AngularJS radio button group that uses ng-repeat

In the following code snippet, I am trying to retrieve the value when any of the radio buttons is selected: <label ng-repeat="SurveyType in SurveyTypes"> <input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeN ...

javascriptjqueryangularjs

React Native - The size of the placeholder dictates the height of a multiline input box

Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...

javascriptandroidtypescriptreact-nativetextinput

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss

Regular expression to identify items containing `href=""` within a specific set of tags

After using a Regex pattern to check for every href="" in my document, I now want it to specifically target all hrefs located between <a and </a> tags while still allowing other parameters within. Do not include in the match: <base href="http ...

phphtmlregex

Vue in d3 - the property ownerDocument is not defined

I'm currently working on integrating d3 charts with Vue. I've noticed that using a ref seems to trigger an error, but is that the correct approach? <template> <div ref="chart"></div> </template> const char ...

javascriptvue.jsd3.js

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

Send in the completed form with your chosen preferences

Is there a way for me to submit a form with the selected option? My backend code is set up to work when using inputs: <input id="id_value_0" name="value" type="radio" value="1" /> <input id="id_value_1" name="value" type="radio" value="2" /> ...

javascriptjquerysubmitform-submitrating

Creating a sleek navigation bar and sliding feature within the header of your Ionic 2

I am looking to create a sliding header for my website where the gallery hides and the navbar moves to the top as I scroll down, similar to the gif provided. Any help or ideas on how to achieve this would be greatly appreciated. Thank you. https://i.sstat ...

javascripthtmlangularionic-frameworkionic2

React JavaScript application encountered an error: Uncaught SyntaxError due to an unexpected token '<'

My program encountered a syntax error at line <div>Hello World!</div> This is the code that is causing the error <!DOCTYPE html> <html> <head> <script src="libs/react.min.js"></script> <script src="lib ...

javascriptreactjs

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

I've been working on an app that allows users to upload an image, draw on it, and save the result. To achieve this functionality, I'm using a canvas element with the uploaded image as its background. The image is retrieved through ImageService. B ...

javascripthtmlgoogle-app-enginegoogle-chrome

Dealing with nested file includes in PHP and passing values to a JavaScript function

When the button is clicked on login.php, it triggers the execution of redirect.php. This redirect.php file carries out Twitter authentication, which includes invoking another file that eventually calls index.php. index.php provides the result in the form ...

javascriptphpjquery

What is the process for modifying the attributes of a currency text box in a Dojo within XPages?

I have come across several discussions aimed at addressing this issue, but none of them have provided a clear and definitive solution that I can easily follow. Is there a straightforward method to modify the css of a dojo field within XPages? Specifically ...

cssdojoxpages