HTML <a> add class attribute with vanilla javascript

Question

I am attempting to have the class changed on HTML "a" content on JS function success. However, my code to change the class by id is not working. I cant seem to figure out what I am doing wrong or if I am missing something.

Scenario: Three "a" tags create fancybox buttons, when a file is loaded successfully, they outline in green(css is already written and verified to be good - "success" keyword in class) so the user knows selections are good to go.

HTML code for tags

JS code that should change their class contents but isnt -

document.getElementById('misc-selection-button').class = 'button big success square fit mr-4';
document.getElementById('weapon-selection-button').class = 'button big success square fit mr-4';
document.getElementById('target-selection-button').class = 'button big success square fit mr-4';

console.log("misc-selection-button class:" + document.getElementById('misc-selection-button').class);
console.log("weapon-selection-button class:" + document.getElementById('weapon-selection-button').class);
console.log("target-selection-button class:" + document.getElementById('target-selection-button').class);

<div class="row justify-content-center mt-5">
    <div class="col-5">
        <a data-fancybox href="#load-miscellaneous" id="misc-selection-button" class="button big square fit mr-4">Miscellaneous</a>
    </div>
</div>


<div class="row justify-content-center mt-5">
    <div class="col-5">
        <a data-fancybox href="#load-weapon" id="weapon-selection-button" class="button big square fit mr-4">Weapon</a>
    </div>
    <div class="col-5">
        <a data-fancybox href="#load-target" id="target-selection-button" class="button big square fit ml-4">Target</a>
    </div>
</div>

Thank you! That was the issue. className made it successful. — user13598104
– user13598104, Commented Oct 21, 2020 at 19:39
I suggest you to play with classList instead, with classList.toggle('success', true) — iguypouf
– iguypouf, Commented Oct 21, 2020 at 19:41
@ChipBrommer if you have found a solution don't forget to mark the accepted answer — kaelle
– kaelle, Commented Oct 21, 2020 at 19:46

Sara · Accepted Answer · 2020-10-21 19:37:48Z

0

I think that your syntax isn't correct. It should be: document.getElementById('misc-selection-button').className = 'button big success square fit mr-4';

answered Oct 21, 2020 at 19:37

Sara

7513 silver badges15 bronze badges

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

Comments

Harikrishnan Kuppusamykrishnan · Accepted Answer · 2020-10-21 19:38:05Z

0

This is probably a syntax problem try

document.getElementById("myDIV").className = "mystyle";

answered Oct 21, 2020 at 19:38

Harikrishnan Kuppusamykrishnan

11 bronze badge

Comments

NoxFly · Accepted Answer · 2020-10-21 19:44:59Z

0

You have to do

// add a class to the list
document.getElementById('misc-selection-button').classList.add('success');
// remove a class to the list
document.getElementById('misc-selection-button').classList.remove('success');
// toggle class in the list
document.getElementById('misc-selection-button').classList.toggle('success', true);
// set all classes once (overwrite)
document.getElementById('misc-selection-button').className = "button big success square fit mr-4";

edited Oct 21, 2020 at 19:44

answered Oct 21, 2020 at 19:39

NoxFly

3082 silver badges13 bronze badges

Collectives™ on Stack Overflow

HTML <a> add class attribute with vanilla javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related