向上一个和下一个按钮添加一个类

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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";