0

I have a pagination script, where I need to append classes to the previous and next buttons.

Code for the same as below.

document.querySelector('.prev').style.opacity=(turntopage == 1)? "0.1" : "1";
document.querySelector('.next').style.opacity=(turntopage == totalpages)? "0.1" : "1";

Currently, on click of previous and next, the visibility is being applied from the above which is rendered as below.

<a class="next" href="#next" style="opacity: 0.1;">
<a class="next" href="#next" style="opacity: 1;">

I need to make changes to the above so instead of style, I can append the class which should be rendered as below.

<a class="next disabled" href="#next">

Complete demo can be seen HERE

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • So just do `.classList.add("disabled")` or `.className += " disabled"` instead of that `.style…` thing? – Bergi May 19 '15 at 06:22
  • possible duplicate http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element – The Reason May 19 '15 at 06:26
  • @Bergi - I did add the `.classList.add("disabled")`, but it is showing as disabled on both on page load, but I want them to append like the style that I have mentioned above which gets applied only when that event occurs – Nitesh May 19 '15 at 06:28
  • @Bergi - The `.className += " disabled";` gives multiple instances of disabled class on the mark-up and its getting populated numerous times on click of the buttons. – Nitesh May 19 '15 at 06:29
  • Which event? The code in your question contains no event handlers. – Bergi May 19 '15 at 06:40
  • @Bergi - I meant onclick of previous and next events. This is a sample code of what happens from the above code. `` and this disabled class gets repeated the number of times you press previous or next. – Nitesh May 19 '15 at 06:42
  • @NKL: Then use `classList`. However repetitions of a class should have no noticeable effects, so I wouldn't care for that. – Bergi May 19 '15 at 06:44
  • The repetitions are not good in my case, as lot of inheritance is there + does not make the mark-up look good. @Bergi – Nitesh May 19 '15 at 06:45
  • Repetitions of CSS class attributes have nothing to do with inheritance. Yes, the markup becomes a bit odd-looking. – Bergi May 19 '15 at 06:46
  • So the point is, adding them like they are getting added fine with my above style code, in which the mark-up too remains neat. So is there a way to add a class where it gets added and removed like the above style code? - @Bergi – Nitesh May 19 '15 at 06:47
  • Yes, just use `.classList.add()` and `.classList.remove()` (or `.classList.toggle()`)! – Bergi May 19 '15 at 06:49
  • But `classList.toggle())` does not support older IE? - @Bergi – Nitesh May 19 '15 at 06:52
  • No it does not. But `querySelector` doesn't either, so it didn't look like you would care. You can shim both, though. – Bergi May 19 '15 at 06:54
  • I resolved it on my onw. My answer as below - http://stackoverflow.com/questions/30318044/adding-a-class-to-the-previous-and-next-buttons/30319188#30319188 - @Bergi – Nitesh May 19 '15 at 07:24

3 Answers3

0

You can use the classList property with the .add and .remove functions:

document.querySelector('.next').classList.add('disabled');

Hy-
  • 93
  • 1
  • 5
  • I resolved it on my onw. My answer as below - http://stackoverflow.com/questions/30318044/adding-a-class-to-the-previous-and-next-buttons/30319188#30319188 – Nitesh May 19 '15 at 07:24
0

Thanks for the support. I solved it myself. I created an ID and added it the same way I had style. It resolved my purpose. Initially, as per suggestions of the people, I did try .classList.add, .addClass, .className +=, etc., but that created multiple instances/duplication of the classes on click of previous and next and that made the mark-up look very messy. This works smoothly. Let me know for any suggestions/edits.

Changes in the code as below.

document.querySelector('.prev').id=(turntopage == 1)? "disabled" : "enabled";
document.querySelector('.next').id=(turntopage == totalpages)? "disabled" : "enabled";

LIVE DEMO OF THE SOLUTION

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • `classList` doesn't duplicate class names? – Bergi May 19 '15 at 07:31
  • It does the duplication. When you check the mark-up on inspect, you can see that. - @Bergi – Nitesh May 19 '15 at 07:33
  • Using ids is very messy. There can be multiple `disabled` and `enabled` elements on a page, yet ids must be unique. Your script doesn't work fine if both elements are enabled, if there are multiple paginated contents in the document, or when there are zero pages so both elements are disabled. – Bergi May 19 '15 at 07:33
  • Better make `#next` and `#prev` become ids and use `enabled`/`disabled` classes that you can assign (and overwrite) using `className`. – Bergi May 19 '15 at 07:34
  • No it works fine. You can check the demo. It only shows disabled for the first previous and the last next. Rest all are enabled. So it remains unique. Plus, the things you have mentioned above does not replicate in my scenario. Thanks for your suggestions. Shall take a note of it - @Bergi – Nitesh May 19 '15 at 07:35
  • I cannot confirm the duplication. What browser are you using? According to the HTML5 spec there must be no duplicate items in a classlist. – Bergi May 19 '15 at 07:36
  • "*Rest all are enabled*" doesn't sound very unique :-) – Bergi May 19 '15 at 07:37
  • `#next` and `#prev` as Id's is a good idea. But I have already them on lot of pages. So changing cannot be ideal now. I can take this note and create it for future implementations. - @Bergi – Nitesh May 19 '15 at 07:37
  • My correction - I mean previous and next and not all as enabled - @Bergi – Nitesh May 19 '15 at 07:38
-1

Either I don't get it, or I don't know what to think...

$( "a" ).addClass( "addClass1 addClass2" );

change the first part to change how the tag matching is done (by element, by id, etc).. but this seems too easy, so most likely i'm missing the point...

upd: missed the no jquery.. use plain js.. var d = document.getElementById("a"); d.className = d.className + " disabled";

witchedwiz
  • 295
  • 2
  • 10
  • There's no jQuery in the question. – Bergi May 19 '15 at 06:23
  • seems fair.. use this: var d = document.getElementById("a"); d.className = d.className + " disabled"; – witchedwiz May 19 '15 at 06:28
  • I resolved it on my onw. My answer as below - http://stackoverflow.com/questions/30318044/adding-a-class-to-the-previous-and-next-buttons/30319188#30319188 – Nitesh May 19 '15 at 07:24