-1

Thank you for advance. I changed the class name in JavaScript, but it doesn't change. [html]

<button id={{ product.id }} data-product={{ product.id }} data-action='add' class="btn btn-outline-secondary add-btn store-cart"> button</button>

[javascript]

var storeBtns = document.getElementsByClassName('store-cart')

for (i = 0; i < storeBtns.length; i++) {
    storeBtns[i].addEventListener('click', function(){
        document.getElementById(this.dataset.product).class = 'btn-primary'})}

When I check (document.getElementById(this.dataset.product).class by adding alert to the bottom line, "btn-primary" appears, but this does not apply in the page. What should I do?

I also tried with classList.add , but it didn't work, so I was wondering if there is anything else to do, such as returning document .

Thank you.

ddd
  • 37
  • 6
  • 1
    The property name is `className`, not `class`. *"I also tried with classList.add , but it didn't work"* That should have worked, what did that attempt look like? – T.J. Crowder Mar 21 '22 at 09:24
  • Thank you for your answer. Sadly...My first attempt was with className, but someone told me to change it to class, but it doesn't work either. I've been searching for too long for this but I can't find the problem. where is the problem?? thank you. – ddd Mar 21 '22 at 09:36
  • 1
    Then the problem isn't in setting the class, since both `.className = "btn-primary";` and `.classList.add("btn-primary");` would work. So you need to debug it to find out what's actually going on. For instance, are you getting an error int he web console (perhaps because of [this problem](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element))? Etc. – T.J. Crowder Mar 21 '22 at 09:37
  • 1
    If after further debugging and research you're still unable to get it working, please update the question with a runnable [mre] using [Stack Snippets](https://meta.stackoverflow.com/questions/358992/) and ping me. – T.J. Crowder Mar 21 '22 at 09:39
  • Yes, I will ping after checking again. To answer what you asked, there is no error in the console, and when you check the last line of alert , the class is changed during alert, but returns to the unaltered initial state upon reload. Thanks for your reply. – ddd Mar 21 '22 at 09:45
  • *"...but returns to the unaltered initial state upon reload."* Why wouldn't it? You're not making any permanent change. – T.J. Crowder Mar 21 '22 at 09:46

1 Answers1

0

classtList.add('class-name') should be what you need: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

That's assuming you want to append btn-primary to the classes already on the element.

for (i = 0; i < storeBtns.length; i++) {
    storeBtns[i].addEventListener('click', function(){
        document.getElementById(this.dataset.product).classList.add('btn-primary');
   });
}
martincarlin87
  • 10,848
  • 24
  • 98
  • 145
  • 1
    ***Such*** a duplicate. It really doesn't need an answer here vs. the ones already in the linked question (or any of the dozen others). – T.J. Crowder Mar 21 '22 at 09:26
  • So sadly I have already tried this method but it doesn't work. Doesn't it take effect after location.reload() ? – ddd Mar 21 '22 at 09:31