Unable to add inline style on click

Asked Jul 24 '19 at 08:44

Active Jul 24 '19 at 08:48

Viewed 40 times

I'm unable to make this code work property. Focus is on style, because everything else is working just fine.

for (var i = 0; i < apartments.length; i++) {
 apartments[i].click(function(e){

  var popupWrap = document.getElementById('front-view');
  var popup = popupWrap.appendChild(document.createElement('div'));
  var el = document.getElementsByClassName('popup');

  popup.className = 'popup';
  popup.innerHTML = "<h4>" + this.data("id") + "</h4>";
  el.style.color = 'red';
 });
}

In console it show me this message

el.style is undefined

edited Jul 24 '19 at 08:48

Federico klez Culloca

26,308
17
56
95

asked Jul 24 '19 at 08:44

Stefan

You have apsolute instead of absolute in your css, have you tried logging el to see if you actually had an element ? – Dylan KAS Jul 24 '19 at 08:45
2

.getElementsByClassName returns a node collection and not a single node. thus style is undefined. As a side note you have a typo on `apsolute` – Fabrizio Calderan Jul 24 '19 at 08:45
Sorry guys that line of css is not needed, i delete it now – Stefan Jul 24 '19 at 08:48
@fcalderan so it's better to use ID? – Stefan Jul 24 '19 at 08:49
1

@Stefan if you end up with just one element having a certain class, it's probably a good candidate for it not being a class at all. So yes, you could use an id instead. – Federico klez Culloca Jul 24 '19 at 08:50
1

you can use el[0] to select the first element. then you can use `el[0].style.color`. Or just `el[2].style.color` – cloned Jul 24 '19 at 08:52
@FedericoklezCulloca yes, it's just one element that i create on click. Thank you, didn't expect that node collection will make a problem here – Stefan Jul 24 '19 at 08:52
Just to confirm, ID do the "trick" – Stefan Jul 24 '19 at 08:55

Unable to add inline style on click

0 Answers0