Add and Erase Functions

handy functions created with looping

by Ace Tributon

HTML

<style id="phStyle"></style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class='container'>
  <div class='click'>
    Start of my clickables
  </div>
  <div class='status'>
    <div class='inner-status'>
      Please enable your browser to run scripts if it is turned off, thank you kindly. If you happen to see this in error if JavaScript is enabled, there is a bug going on. And is in due process of being fixed!</div>
  </div>
  <div class='infect'>
    <ul>This Content Covers:
      <li>Infestation</li>
      <li>Charger</li>
      <li>Ancient</li>
      <li>Boiler</li>
      <li>Runner</li>
      <li>Crawler</li>
    </ul>
  </div>
  <div class='parenthesis'>
    <p>
      The basics of Parenthesis Script
    </p>
  </div>
</div>

CSS

* {
  margin: 0 auto;
  width: 95%;
  text-decoration: none;
  list-style-type: none;
}

.status {
  background-image: url('https://78.media.tumblr.com/a38c2f1a4692e64097a8496caaf432e9/tumblr_ogvv5sYSxK1qdim8eo1_500.gif');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  padding: 8%;
  height: 150px auto;
  background-color: #000;
  font-size: 150%;
  width: 85%;
  /*filter:blur(1px);*/
}

.inner-status {
  text-align: right;
  width: 60%;
  float: right;
}

JavaScript

/* SYNTAX: function name(selector,output);*/
  let
    c, d, i, bg = 'background-',
    group = gather => gather.join(''),
    $$ = (...para) => {
        para.forEach((element, index, array) => {
            if (element === null || (element === undefined)) { return console.log(`Undefined Parameter: Parameter ${index} broke.  Failed content :: '${para[index]}'`);            
            } else if (element === ``) {return console.log(`Undefined Parameter: Parameter ${index} cannot be empty!`);           
            } else if (typeof element === 'number') { return console.log(`Undefined Parameter: Parameter ${index} cannot be a number!`);
            } else { return element + console.log('Passed :: ' + para[index]);
            }});},
    $ = (selector, output) => document.querySelectorAll(selector).forEach(output),
    ready = it => group(it),
    loop = (item, callback) => {
      for (z = 0; item[z]; z++) {
        callback.call(item[z], z);
      }
    },
    each = (array, output) => array.forEach(output),
    filler = `Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce libero mi,euismod non orci ac,consequat maximus nulla. Aliquam lacinia tellus scelerisque fringilla lacinia. Sed nec scelerisque est. Aenean id ipsum elit. Mauris vel mauris facilisis urna convallis fermentum non vel massa. Praesent porttitor gravida sem,id ornare mauris lacinia non. Pellentesque sed rutrum magna,ut iaculis mi. Nulla tincidunt eu leo eu laoreet. Mauris viverra faucibus dictum. Cras scelerisque ex ut leo aliquam aliquam. Maecenas vestibulum mollis nisl in sodales.<br />`.repeat(2),
    html = (selector, ...output) => {
      $(selector, iterate => iterate.innerHTML += group(output));
    },
    erase = selector => {
      $(selector, iterate => iterate.innerHTML = "");
    },
    change = (selector, ...output) => {
      $(selector, iterate => iterate.innerHTML = group(output));
    },
    changeLog = (selector, output) => {
      $(selector, iterate =>...