How to make only elements which have ids clickable?

Question

Each div is clickable (JavaScript).

How to make it such that only elements with an id are clickable, and elements with a class are not clickable?

Is there a replacement option:

var div = document.getElementsByTagName ("div");

With

var div = document.getElementsByClassName ("div");

I tried but did not work

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {

  div[i].onclick = function(e) {

    clickedDivId = this.id;
    event.stopPropagation();
    alert(this.id);

  };
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

Select the elements having an id: `document.querySelectorAll('[id]');`. — Teemu, May 22 '19 at 15:20
You could have easily copied and pasted the snippet from [your last question with this same code](https://stackoverflow.com/q/56255818/215552), BTW... — Heretic Monkey, May 22 '19 at 15:25
For this question, what about if the element has both an id and a class? — Heretic Monkey, May 22 '19 at 15:26

Banzay · Accepted Answer · 2019-05-22T15:38:09.210

Here is a solution where clicks on elements with existent attribute id are treated. You can add else section to JS code to process all of other clicked div.

var div = document.getElementsByTagName("div");
var divCount = div.length;

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        if (e.target.id) alert(this.id);
        e.stopPropagation();
    };
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

And this is a short coded JS:

var div = document.getElementsByTagName("div");

[...div].forEach( (el) => {
    el.onclick = function(e) {
            e.stopPropagation();
            e.target.id &&  alert(this.id);
        }
});

https://stackoverflow.com/questions/56280742/why-change-the-color-inside-the-diva-does-not-work Thank you for your reply. I can ask you to answer the following question in the link — aldin_abdagic, May 23 '19 at 18:07

score 1 · Answer 2 · answered May 22 '19 at 15:30

Aside from the obvious substitution of getElementsByTagName with document.querySelectorAll('div[id]') to only select div elements that have an id attribute, I would suggest delegating this event and handling the id part in the listener. This way there's only a single handler function, and it will work with elements that may be added / modified in the DOM later on.

document.body.addEventListener( 'click', e => {
   const { id } = e.target;
     if( id ){
        console.log( id );
     }
});

demo: https://jsfiddle.net/85ob2vqg/

Or in ES5

document.body.addEventListener( 'click', function(e){
   var  target = e.target;
     if( target.id ){
        console.log( target.id );
     }
});

score 0 · Answer 3 · answered May 22 '19 at 15:22

You can select by class like this:

const idSet = document.querySelectorAll('#a');
const classSet = document.querySelectorAll('.a');

const log = t => () => console.log(t);

idSet.forEach(element => element.onclick = log('id click'))
classSet.forEach(element => element.onclick = log('class click'))

<button id="a">1</button>
<button class="a">2</button>
<button class="a">2</button>

Logan · Answer 4 · 2019-05-22T15:43:31.167

You can select all of the elements with an id like this:

document.querySelectorAll('[id]');

Then you can use an event listener for your clicks.

    const clickableIds = document.querySelectorAll('[id]');
    clickableIds.forEach(element => {
      element.addEventListener('click', () => {
          alert('Here is your element object: ' + element);
      });
    });

    #parent {
      width: 450px;
      height: 170px;
      margin: 10px;
      padding: 10px;
      background-color: blue;
    }
    
    #child {
      width: 430px;
      height: 70px;
      margin: 10px;
      float: left;
      background-color: red;
    }
    
    .parentclass {
      width: 450px;
      height: 170px;
      margin: 10px;
      padding: 10px;
      background-color: blue;
    }
    
    .childclass {
      width: 430px;
      height: 70px;
      margin: 10px;
      float: left;
      background-color: red;
    }

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

How to make only elements which have ids clickable?

4 Answers4