Adding an EventListener to Multiple Elements using forEach() JS + tweakpane - dec2020

adding-an-eventlistener-to-multiple-elements-using-foreach-js-tweakpane-dec2020.markdown

Adding an EventListener to Multiple Elements using forEach() JS + tweakpane - dec2020

A Pen by Tom Hermans on CodePen.

License.

index.html

<main>
  <h2>Adding an Event Listener to Multiple Elements Using a <code>forEach()</code> Loop</h2>

  <p>Open the console and click any of the buttons. The same event listener is added to each button using a <code>forEach()</code> loop.</p>

  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>

  <p class="msg">button clicked shows here</p>

</main>
<div class="buttons" id="buttons">

</div>

script.js

console.clear();
let root = document.documentElement;

// create 16 buttons
for (var i = 1; i <= 16; i++) {
  var elem = document.createElement("button");
  elem.type = "button";
  elem.id = "btn" + i;
  elem.value = "btn " + i;
  elem.innerHTML = "btn " + i;
  elem.addEventListener("click", showBtn(elem));
  document.getElementById("buttons").appendChild(elem);
}

let btns = document.querySelectorAll("button");

btns.forEach(function (elem) {
  elem.addEventListener("click", function () {
    btns.forEach((btn) => {
      btn.classList.remove("active");
    });
    elem.classList.add("active");
    var btnid = elem.id;
    // refresh pane.
    console.log(typeof PARAMS, PARAMS[btnid]);
    PARAMS.btn1 = !PARAMS.btn1;
    pane.refresh();
    document.querySelector(".msg").innerHTML = elem.innerHTML;
  });
});

function showBtn(elem) {
  // console.log(elem);
  document.querySelector(".msg").innerHTML = elem.innerHTML;
}

// webmidi
// https://www.smashingmagazine.com/2018/03/web-midi-api/

if (navigator.requestMIDIAccess) {
  console.log("This browser supports WebMIDI!");
} else {
  console.log("WebMIDI is not supported in this browser.");
}
navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) {
  console.log(midiAccess);

  var inputs = midiAccess.inputs;
  var outputs = midiAccess.outputs;
}

function onMIDIFailure() {
  console.log("Could not access your MIDI devices.");
}

function onMIDISuccess(midiAccess) {
  for (var input of midiAccess.inputs.values()) {
    input.onmidimessage = getMIDIMessage;
  }
}

function getMIDIMessage(midiMessage) {
  console.log(midiMessage);
}

function getMIDIMessage(message) {
  var command = message.data[0];
  var note = message.data[1];
  var velocity = message.data.length > 2 ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

  switch (command) {
    case 144: // noteOn
      if (velocity > 0) {
        noteOn(note, velocity);
      } else {
        noteOff(note);
      }
      break;
    case 128: // noteOff
      noteOff(note);
      break;
    // we could easily expand this switch statement to cover other types of commands such as controllers or sysex
  }
}
// *********************************
// tweakpane parameters

var PARAMS = {
  btn100: false,
  width: 10,
  size: 100,
  wave: 0,
  message: "Tweakpane test"
};

const pane = new Tweakpane();

// generate 16 buttons in tweakpane
for (i = 1; i <= 16; i++) {
  let btn = "btn" + i;
  console.log(btn);
  if (i%2 == 0) {
    PARAMS["btn" + i] = false;
  } else { 
    PARAMS["btn" + i] = true;
  }
  pane.addInput(PARAMS, btn, {});
}

console.log({ PARAMS });

function setRootProp(i) {
  
}

pane
  .addInput(PARAMS, "btn100", {
    // min: 0,
    // max: 1
  })
  .on("change", (val) => {
    console.log(val);
    if (val) {
      root.style.setProperty("--bodybg", "var(--bg1)");
    } else {
      root.style.setProperty("--bodybg", "var(--bg2)");
    }
  });

pane
  .addInput(PARAMS, "width", {
    min: 0,
    max: 30
  })
  .on("change", (val) => {
    // console.log(val);
  });

pane
  .addInput(PARAMS, "size", {
    options: {
      big: 200,
      medium: 100,
      small: 50
    }
  })
  .on("change", (val) => {
    // box_el.style.height = val + "px";
    // box_el.style.width = val + "px";
    console.log(val);
  });

pane.addInput(PARAMS, "message");
pane
  .addButton({
    title: "Button"
  })
  .on("click", (value) => {
    alert(PARAMS.message);
  });

pane.addMonitor(PARAMS, "wave", {
  view: "graph",
  min: -1,
  max: +1
});
// const updateStyle = element => document.body.style.setProperty(element.name, element.value) || (element.nextElementSibling.innerText = element.value)

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>

style.scss

:root {
  --bg1: #ffa;
  --bg2: #fdf;
  --bodybg: var(--bg2);
}
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
  background: var(--bodybg);
}

main {
  text-align: center;
  // margin: 0 auto;
  max-width: 800px;
  width: 60vw;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

.msg {
  text-align: center;
  color: red;
}

button {
  margin-bottom: 8px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  button {
    display: inline-block;
    margin: 10px 0 0 10px;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1 / 8) - 10px - 1px);
  }
}
.active {
  background: pink;
}