Select multiple elements and modify using JavaScript

Issue

This is my code:

// "cls" returned document.getElementsByClassName()

if (cls('disableCM') != null) {
    cls('disableCM').setAttribute('oncontextmenu', 'return false');
}

I want every tag using class="disableCM" to be returned false. There for i want to set attribute "contextmenu" with "return false". But the upper code only works for the first element.

Solution

Getting the basic idea from the question, I assume you are trying to avoid the right click on certain elements. For that to happen you have to attach the event listener to every element. In order to do that below is a piece of working code. The items in grey are disable and if you right click, it will not show the context menu, while on the other elements it will show the context menu.

var disabled = document.getElementsByClassName("disableCM");
Array.prototype.forEach.call(disabled, (element) => {
  element.oncontextmenu = function() {
    return false;
  }
});

.disableCM {
  background: grey;
}

div {
  height: 50px;
}

<div class="disableCM">Element 1</div>
<div class="disableCM">Element 2</div>
<div class="disableCM">Element 3</div>
<div>Element 6</div>
<div class="disableCM">Element 4</div>
<div>Element 5</div>

Answered By - Manish