JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<pre>
querySelectorAll for id*= 'media' and change matched element's className
   and do querySelectorAll on the match to search for child item's matching
    'div.image' and then change first found child item's className at same
     time. (bug would be if one HTML DOM item with id*= 'media' contained
              more than one child HTML element matching 'div.image', 
                like perhaps a slideshow )
</pre>

JavaScript

javascript_:function MyBookmarkletDebugAlert(strMessage) {
    if (boolMyBookmarkletDebugAlerts) {
        if (boolMyBookmarkletDebugToRegularAlert) {
            alert(strMessage);
        }
        if (boolMyBookmarkletDebugToConsole) {
            console.log('console log instead of alert: ' + strMessage);
        }
    } /*end big if boolMyBookmarkletDebugAlerts section */ 
} /* end of function MyBookmarkletDebugAlert */


javascript:function funcMyForEachHTMLDOMItemInPassedArray_replaceWholeclassName(itemsHTMLDOM_PassedArray, strNewClassName) {
   for (var i = 0, len = itemsHTMLDOM_PassedArray.length; i < len; i++) {
        try {
           itemsHTMLDOM_PassedArray[i].className = strNewClassName;
        } catch (err) {}
   }  /* end of __ for each querySelectorAll __ loop */


    if (1) {
        console.log('');
    } /*end big __  if (1)  ____  section */ 
} /* end of function funcMyForEachquerySelectorAll_replaceWholeclassName */


javascript:function untested_funcMyForEachquerySelectorAll_replaceWholeclassName(strCSSselector, strNewClassName) {
   for (var i = 0, len = document.querySelectorAll(strCSSselector).length; i < len; i++) {
        try {
           document.querySelectorAll(strCSSselector)[i].className = strNewClassName;
        } catch (err) {}
   }  /* end of __ for each querySelectorAll __ loop */


    if (1) {
        console.log('');

    } /*end big __  if (1)  ____  section */ 
} /* end of function funcMyForEachquerySelectorAll_replaceWholeclassName */

javascript:for (var i = 0, len = document.querySelectorAll('[id*=\'media\']').length; i < len; i++) {  
    try {
        console.log( 'array from querySelectorAll, index ' + i + ' is: ' + document.querySelectorAll('[id*=\'media\']')[i].className );
        console.log(  document.querySelectorAll('[id*=\'media\']')[i].querySelectorAll('div.image')[0].className );
        /*    document.querySelectorAll('[id*=\'media\']')[i].querySelectorAll('div.image')[0].className= "story-body-text...