Adding attribute to an element Javascript

Question

I am JavaScript begginer and could use your help with the query below:

I had to find all li placed in nav tag in html. Now I have to check if li has data-direction attribute and if it doesn't - set this attribute to "top". I tried to do it using simple loop, but it doesn't seem to be working - I keep getting info from console that "direction is not defined" so it seems that it doesn't see "data-direction" as an attribute. Maybe I should indicate this attribute differently? Here is my code:

   var navLi = document.querySelectorAll("nav li");

   for (i = 0; i < navLi.length; i++) {
       if (navLi[i].data-direction === " ") {
       navLi[i].data-direction = "top";
      }
   }

Thanks in advance!

jack · Accepted Answer · 2016-10-22 19:07:58Z

2

You're looking for hasAttribute()/setAttribute().

for (i = 0; i < navLi.length; i++) {
   if ( !navLi[i].hasAttribute('data-direction') ) {
     navLi[i].setAttribute('data-direction', 'top')
  }
}

answered Oct 22, 2016 at 19:07

jack

2,9141 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Nagle · Accepted Answer · 2016-10-22 19:20:50Z

0

getAttribute() will return null or an empty string so you need to use the hasAttribute() method to handle the null case.

for (var item of document.querySelectorAll("nav li")) {
  if (!item.hasAttribute("data-direction") || item.getAttribute("data-direction").trim() === "") {
    item.setAttribute("data-direction", "top");
  }
}

answered Oct 22, 2016 at 19:20

Dan Nagle

5,4751 gold badge20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Adding attribute to an element Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related