0

I am trying to select a li by its second class. I've tried a bunch of different things but I'm new to javascript and nothing is working for me. This is my code at the moment.

HTML

<li class="nav-links" id="doing">doing</li>
<li class="nav-links active" id="being">being</li>
<li class="nav-links" id="done">done</li>

Javascript

var active = document.querySelector("nav-links active");
var initialInner = e.innerHTML;
e.innerHTML = active.innerHTML;
active.innerHTML = initialInner;

Thank you in advance for taking the time to help

Edit: The code works when I change active class to an id and use getelementbyid. Is there possibly a difference between queryselector and getelementbyid that could be causing the code to not run?

rosalynnas
  • 414
  • 7
  • 18
  • `.nav-links.active` will select any element that has both classes - what your selector is looking for is an element called `active` that is a descendant of an element called `nav-lilnks` - perhaps brush up on your CSS selectors syntax – Jaromanda X Mar 04 '18 at 02:27
  • https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name try reading this answer. – Atul Kumar Mar 04 '18 at 02:49

1 Answers1

0

You want document.querySelector(".nav-links.active").

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • Thanks for the response! But this didn't work, nor did the comment above. The only way I have been able to get the code to work is by changing the active class to an id and using getElementById. But I need the id of that li to do something else so I'm stuck with classes. – rosalynnas Mar 04 '18 at 02:40
  • Take a look at this plunker: http://plnkr.co/edit/lJXVyd91qM9sdjqmCSPq?p=preview. I got the recommended selector to work just fine. I look up the element using ".nav-links.active" then change the text from "being" to "BEING". It wouldn't work if the selector didn't work. – kshetline Mar 04 '18 at 02:48
  • By the way, make sure you don't add any spaces in there. It all has to be squashed together or it doesn't work. ".nav-links .active" (with a space) means something different from ".nav-links.active" (without a space). – kshetline Mar 04 '18 at 02:52
  • It must have been something with the way I set my variables up, I rewrote it all out and it works perfectly now. Thank you for the plunker preview, it helped a lot! – rosalynnas Mar 04 '18 at 03:16