[SOLVED] If else Statement in Foreach loop

If else Statement in Foreach loop

I added if (windows = id | ....){do nothing} but it doesn't work.

    var html;
    var windows = document.getElementsByClassName("windows");
    for (var i = 0; i < windows.length; i++) {

    var win = document.getElementById(windows[i].id);
    
    if(win.id == "windows-s" || win.id == "windows-f" || win.id == "windows-p"){
        
    }else{
        var win_el = document.getElementById(win.id).id;
        win_el.forEach(function(div){

        div.removeAttribute("style");
        var clonedDiv = div.cloneNode(true);
        var inner_HTML = clonedDiv.innerHTML;
        
        html += "HTML"+ i++ +"=" + inner_HTML + ",";
        )}
    }
    console.log(html);
    }

Code takes parent(windows) innerHtml and changes attributes with each child. After that, it creates result html1 = innerhtml, html2 = innerhtml, html3 = innerhtml etc... Everything works fine, but now I need to avoid some windows by their id. I added if (windows = id | ....){do nothing} but it doesn't work.

Solution

Details are commented in example

/**
 * Utility function that logs formatted data to console
 * @param {Any} data - Handles whatever a valid JSON can handle
 * @returns {String<htmlString>} - HTML rendered from targeted DOM
 */
const log = data => console.log(
  JSON.stringify(data)
  .replace(/\\(")|\\n|\[|\]/g, "$1"));

/**
 * Collect a NodeList of tags, then convert it into an array.
 * For each node of array, add/remove a given key/value pair.
 * Optional feature includes a list of nodes to be excluded or included 
 * @param {String<CSS selector>} selector - A CSS selector used to find
 *        the targeted DOM.
 * @param {Array<string>} attribute - An array pair. [key, value]
 *        value (attribute[1]) is optional and @defaults to null
 * @param {String<CSS selector>} list - An unlimited number of strings
 *        in CSS selector format. The last item must be a Boolean
 *        (true or false no quotes). 
 *        TRUE result in all nodes in list will be processed.
 *        FALSE result in all nodes except the listed nodes will be processed.
 * @returns {String<htmlString>} - htmlString of each node
 */
function controlDOM(selector, attribute, ...list) {
  const nodes = Array.from(document.querySelectorAll(selector));
  attribute.length = 2;
  return nodes.map(node => {
    let inclusion = list.at(-1) ?
      list.some(exc =>
        node.matches(exc)
      ) :
      !list.some(exc =>
        node.matches(exc)
      );
    if (inclusion) {
      if (attribute[0] === "class") {
        node.classList.toggle(attribute[1]);
      } else if (attribute[0] === "style") {
        node.style.cssText = attribute[1];
      } else {
        node.setAttribute(attribute[0], attribute[1] || null);
      }
      return node.outerHTML;
    }
  });
}

log(controlDOM(".win", ["class", "invert"], "#winB", "#winD", "#winF", false));

log(controlDOM(".win", ["class", "red"], "#winA", "#winC", "#winE", true));

log(controlDOM(".win", ["style", "border: 2px ridge #555;border-radius: 33%"], "#winA", "#winB", "#winC", false));

log(controlDOM("main", ["style", "background: #333"]));

:root {
  font: 300 5vmin/1 "Segoe UI"
}

body {
  margin: 0;
  color: #000;
  background: #fff;
}

main {
  display: flex;
  width: 98vw;
}

.win {
  width: 3rem;
  margin: 1.5rem;
  font-size: 3rem;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: max-content;
  padding: 0.25rem 0.75rem 1rem;
  color: inherit;
}

a:hover {
  color: gold;
  outline: 3px gold dotted;
}

.invert {
  color: #fff;
  background: #000;
}

.red {
  outline: 3px dashed red;
}

.as-console-row::after {
  width: 0;
  font-size: 0;
}

.as-console-row-code {
  width: 100%;
  padding: 8px;
  font: 300 5vmin/1.5 Consolas;
  word-break: break-word;
  color: lime;
  background: black;
}

.as-console-row-code::before {
  content: "[";
  color: tomato
}

.as-console-row-code::after {
  content: "]";
  color: tomato
}

<main>
  <section id="winA" class="win red">
    <a href="#">A</a>
  </section>
  <section id="winB" class="win red">
    <a href="#">B</a>
  </section>
  <section id="winC" class="win red">
    <a href="#">C</a>
  </section>
  <section id="winD" class="win red">
    <a href="#">D</a>
  </section>
  <section id="winE" class="win red">
    <a href="#">E</a>
  </section>
  <section id="winF" class="win red">
    <a href="#">F</a>
  </section>
</main>