click function(), querySelectorAll, getElementByClassName and getElementById, try all variants

Question

I try that the ID and the class variants work. The click and the message does not work.

html

<button type="button" class="trigger">Delete Message</button>

<h3>Message:</h3>

<div class="messageAllClass"></div>
<div class="messageClass"></div>
<div id="messageID"></div>

js

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

let messageAllClass = document.querySelectorAll('.messageAllClass');
let messageClass = document.getElementByClassName('messageClass');
let messeageID = document.getElementById('messageID');

let messageTxtAllClass = "hallo from AllClass";
let messageTxtClass = "hallo from Class";
let messageTxtID = "hallo from ID";

messageAllClass.innerHTML = messAllClass.textContent + messageTxtAllClass;
messageClass.innerHTML = messClass.textContent + messageTxtClass;
messeageID.innerHTML = messID.textContent + messageTxtID;

click.onclick = function() {
  messageAllClass.innerHTML = "null";
  messageClass.innerHTML = "null";
  messeageID.innerHTML = "null";
}

saved on jsfiddle

score 0 · Answer 1 · answered May 31 '20 at 15:07

let click = document.querySelectorAll('.trigger'); // IE8
let mess = document.querySelectorAll('.message-class');
let messID = document.getElementById('message-id');
let messTxt = "hallo from class";
let messTxtID = "hallo from id";

mess[0].innerHTML = mess[0].textContent + messTxt;
messID.innerHTML = messID.textContent + messTxtID;

click[0].onclick = function() {
  mess.innerHTML = "leer";
  messID.innerHTML = "leer";
}

 <button type="button" class="trigger">Delete Message</button>
 <h3>Message:</h3>
<div class="message-class"></div>
<div id="message-id"></div>

click function(), querySelectorAll, getElementByClassName and getElementById, try all variants

1 Answers1