If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

Question

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

I'm looking to create a basic if/else statement in JavaScript that checks if a div element has changed before populating JSON data fields/variables that pull from dynamically updated HTML.

I want to avoid using the deprecated DOMSubtreeModified method.

Below is my initial logic, but I need to find an alternative to DOMSubtreeModified and figure out how to nest my data array so it only populates after checking my if (condition). Any tips would be appreciated.

var element = document.querySelector('.username'); // username div wrapper

//if {

element.addEventListener('DOMSubtreeModified', function() { // detect if div element changes
  var date = new Date();
  var month = date.getUTCMonth() + 1;
  var day = date.getUTCDate();
  var year = date.getUTCFullYear();

  var time = date.toLocaleTimeString();
  var formattedDate = month + '/' + day + '/' + year;

  console.log(time); // 7:01:21 PM
  console.log(formattedDate); // 3/15/2016
}, false);

// change something on element
setTimeout(function() {
  element.dataset.username = 'bar';
}, 3000);

// json object with captured data fields

var NewUserSession = [{ 

    currentusername: $('.username').text(),
    referrer: document.referrer,
    loggedintime: $(formattedDate),

}];

//}
//
//else { 
//
//
//}

javascript jquery json ajax

Answer 1

Answer №1

To monitor changes in the data-username attribute, you can utilize the MutationObserver API.

var element = document.querySelector('.username'); // Identify username div wrapper

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'data-username') { // Check for specific attribute change
      var date = new Date();
      var month = date.getUTCMonth() + 1;
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();

      var time = date.toLocaleTimeString();
      var formattedDate = month + '/' + day + '/' + year;

      snippet.log(time); // Output: 7:01:21 PM
      snippet.log(formattedDate); // Output: 3/15/2016
    }
  });
});

var config = {
  attributes: true,
  attributeFilter: ['data-username']
};

// Start observing the specified element with defined configuration
observer.observe(element, config);

// Simulate a change on the element after 1 second
setTimeout(function() {
  element.dataset.username = 'bar';
}, 1000);

<!-- Include the `snippet` object for logging results -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="username"></div>

Answer 2

To monitor changes in the data-username attribute, you can utilize the MutationObserver API.

var element = document.querySelector('.username'); // Identify username div wrapper

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'data-username') { // Check for specific attribute change
      var date = new Date();
      var month = date.getUTCMonth() + 1;
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();

      var time = date.toLocaleTimeString();
      var formattedDate = month + '/' + day + '/' + year;

      snippet.log(time); // Output: 7:01:21 PM
      snippet.log(formattedDate); // Output: 3/15/2016
    }
  });
});

var config = {
  attributes: true,
  attributeFilter: ['data-username']
};

// Start observing the specified element with defined configuration
observer.observe(element, config);

// Simulate a change on the element after 1 second
setTimeout(function() {
  element.dataset.username = 'bar';
}, 1000);

<!-- Include the `snippet` object for logging results -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="username"></div>

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

Answer №1

Similar questions

Every time I attempt to run "npm install" on Visual Studio Code, I encounter an error

Compel the browser to launch a fresh tab

Steps for Embedding an HTML Page into a Tab using jQuery

Flexible Magento layered navigation

Tips for passing two parameters to an event in JavaScript

Is it possible to upload an image file while the element is hidden with "display: none" property?

Tips for embedding text into a doughnut chart with primeng/chart.js

Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

Increase the value by one of the number enclosed in the <h3> element

Free up MySQL connections within a Promise.All implementation

most effective method for recycling dynamic content within Jquery mobile

Determine the frequency of a specific key in an array of objects

"Pressing the 'back' button on your browser takes

Error occurs when multiple checks are performed on the same script during form validation

Tips for smoothly animating and showing content as the user scrolls to a specific element on the page

Deactivate the button once it's been used | Discord.js version 14

Showing an image stored in an array using JavaScript

Using javascript to store HTML tags in a variable

Interacting with the header component within the renderHeader property of the MUI Data Grid Pro will update the sortModel

What is the best way to embed HTML code within an amp-list component?