CODEWITHSUNDEEP
javascripthtml
user13598104
user13598104

Reputation:

HTML <a> add class attribute with vanilla javascript

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>

Upvotes: 0

Views: 340

Answers (3)

NoxFly
NoxFly

Reputation: 308

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

Upvotes: 0

Harikrishnan Kuppusamykrishnan
Harikrishnan Kuppusamykrishnan

Reputation: 1

This is probably a syntax problem try

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

Upvotes: 0

Sara
Sara

Reputation: 751

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

Upvotes: 0

Related Questions