js click id an classname

js problems

by Cem Firat

HTML

<h1>On one side</h1>

<div class="main">
  <h3>Message:</h3>
  <div class="messageAllClass"></div>
  <div class="messageClass"></div>
  <div id="messageID"></div>
</div>

<div class="panel">
  <h3>Panel:</h3>
  <div class="messageAllClass"></div>
  <div class="messageClass"></div>
</div>

<button type="button" class="trigger">Delete all messages</button>

CSS

.main{
  background: #ddd;
  padding: 5px;
  margin-bottom: 10px;
}
.panel{
  background: gold;
  padding: 5px;
  margin-bottom: 10px;
}
h3{
  margin-top: 0;
}

JavaScript

let click = document.querySelectorAll('.trigger');

let messageClass = document.getElementsByClassName('messageClass');
let messageAllClass = document.querySelectorAll('.messageAllClass');
let messeageIDuniq = document.getElementById('messageID');

let messageTxtAllClass = "hallo from AllClass";
let messageTxtClass = "hallo from Class";
let messageTxtIDuniq = "hallo from ID, i am unique :-)";

let deleted = "deleted";
let i;
let cls = click.length;

//messageAllClass.innerHTML = messageAllClass.textContent + messageTxtAllClass;
//messageClass.innerHTML = messageClass.textContent + messageTxtClass;
messeageIDuniq.innerHTML = messeageIDuniq.textContent + messageTxtIDuniq;

for(let i = 0; i < messageAllClass.length; i++) {
	console.log(messageAllClass[i])
    // you want to add the inner html of that collection
    messageAllClass[i].innerHTML = document.querySelectorAll('.messageAllClass').innerHTML;
}

for(let i = 0; i < messageClass.length; i++) {
    // you want to add the inner html of that collection  
    messageClass[i].innerHTML = document.getElementsByClassName('messageClass')[0].innerHTML;
}

for (let i = 0; i < cls; i++) {
  click[i].onclick = function () {
  	messageAllClass.innerHTML = "null";
  	messageClass.innerHTML = "null";
  	messeageIDuniq.innerHTML = deleted;
    alert("all messages deleted!");
  }
}