0

I had a question earlier here which got me to this stage to ask another question:

Summary of what I am trying to achieve:

I am trying to use MutationObserver to keep a watch on my document and then change the 'type' of input element loaded dynamically.

Incomplete Code and needs help:

var observer = new MutationObserver(function (mutations)
           {
             mutations.forEach(function (mutation)
             {
               console.log(mutation.type);

             // here I need to get all elements with class "GTnumeric" and 
             // change its "type" to be "tel" if its not "hidden"

             // **please help me out here**
                       // TRIED CODE 

             });
            });

  var config = {
  childList: true,
  subtree: true
  };

 // Node, config
 var targetNode = document.body;

 // or would you rather suggest me to try
 var targetNode = document.getElementsByClassName(".GTnumeric");


 // setting the observer
 observer.observe(targetNode, config);

I am not sure how to iterate through the returned mutation inside for loop. I tried below in the place of CODE mentioned in the above snippet and I got: [Uncaught TypeError: t[i].getAttribute is not a function]

TRIED CODE

var elems = document.getElementsByClassName(".GTnumeric");
for (var el in elems) {
    if (elems[el].getAttribute("type") != 'hidden') {
        elems[el].setAttribute("type", "tel");
    }
}

Please guide me further as I am not sure how to use MotationObserver effectively. Thanks for your help!

chethandb
  • 1,021
  • 1
  • 9
  • 17
  • If you run that for loop on an array with length 12 (i.e, 12 elements) the loop will be run 13 times. The problem comes on the last run through the loop. Know thy debugger! – enhzflep Aug 10 '18 at 22:10
  • 1. getElementsByClassName doesn't expect `.` in class name, 2. There are tons of examples for MutationObserver, here's mine: [How to change the HTML content as it's loading on the page](//stackoverflow.com/a/39334319) – wOxxOm Aug 11 '18 at 04:12

0 Answers0