Increment the counter value by one when a new class is created or appended

Question

Increment the counter value by one when a new class is created or appended

My goal is to develop a system that increments the 'fault' counter by one every time a wrong answer is submitted. To achieve this, I have configured my system to detect when a class named "incorrectResponse" is generated. However, I am encountering an issue where the counter only increases upon page load and does not update afterwards.

Below is the code snippet that I have attempted but hasn't been successful:

  //*-- Fault counter --*//
  if (document.querySelectorAll('incorrectResponse')) {
    $('#fault-counter').html(function(i, val) { return val*1+1 });
  };

Can anyone shed light on why this behavior is occurring?

javascript jquery html css

Answer 1

Answer №1

If you are utilizing jQuery (as mentioned in your comments), one approach could be to add an event listener to the container where your 'wrong answers' are located.

A custom event would be manually triggered each time a wrong answer is added to the page, allowing the event listener to update the count of incorrect answers accordingly.

function updateNumberOfIncorrectMsgs() {
  $('.counter').text($('.incorrectAnswer').length);
}

updateNumberOfIncorrectMsgs();
var $container = $('.wrongAnswersContainer')
  .on('newWrongAnswerAdded', function() {
    updateNumberOfIncorrectMsgs();
  });

// The for loop and setTimeout are used to simulate new messages being added to the page, while the crucial part is the custom event that is triggered upon adding an element.
for (var i = 1; i < 6; i++) {
  setTimeout(function() {
    $container
      .append('<p class="incorrectAnswer">Incorrect answer</p>')
      .trigger('newWrongAnswerAdded');
  }, 1000 * i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Number of incorrect answers: <span class="counter"></span>
</p>
<div class="wrongAnswersContainer"></div>

Answer 2

If you are utilizing jQuery (as mentioned in your comments), one approach could be to add an event listener to the container where your 'wrong answers' are located.

A custom event would be manually triggered each time a wrong answer is added to the page, allowing the event listener to update the count of incorrect answers accordingly.

function updateNumberOfIncorrectMsgs() {
  $('.counter').text($('.incorrectAnswer').length);
}

updateNumberOfIncorrectMsgs();
var $container = $('.wrongAnswersContainer')
  .on('newWrongAnswerAdded', function() {
    updateNumberOfIncorrectMsgs();
  });

// The for loop and setTimeout are used to simulate new messages being added to the page, while the crucial part is the custom event that is triggered upon adding an element.
for (var i = 1; i < 6; i++) {
  setTimeout(function() {
    $container
      .append('<p class="incorrectAnswer">Incorrect answer</p>')
      .trigger('newWrongAnswerAdded');
  }, 1000 * i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Number of incorrect answers: <span class="counter"></span>
</p>
<div class="wrongAnswersContainer"></div>

Increment the counter value by one when a new class is created or appended

Answer №1

Similar questions

Is there a way to implement a setTimeout delay in my puppeteer browser?

Load and execute a dynamically created script in JavaScript at the same time

What is the optimal approach for managing script initialization on both desktop and mobile devices?

Looking to simplify the complex JSON structure by converting it into an array using JavaScript

Understanding the scope of a variable within a function in JavaScript

Resizing images in HTML can sometimes lead to extra white space appearing underneath the

What methods are available to stop Internet Explorer from caching HTML content without resorting to utilizing arbitrary query parameters?

When a specific function is called, the DayPickerRangeController in the airbnb/react-dates library will update the

The latest update of MS CRM 2013 now includes a version number for WebResources that are of script

Which hook should be implemented for automatically updating stock levels after a successful payment on WooCommerce?

Using JavaScript to filter an array of objects by another array of objects

Displaying a div and ensuring it remains visible upon clicking

I am experiencing an issue with importing my CSS file

Unable to retrieve an image from various sources

"Encountered an issue when attempting to convert undefined or null to an object within a

AngularJS is failing to properly register custom directives

Received an unexpected result while attempting to access information from a node API

Can you provide any methods for enhancing a pre-existing jQuery event handler?

Despite having a result, the Promise is returning an undefined value

What is the best way to transform a CSS linear gradient into JavaScript code for use in a React Native application