How I can add element's of class using JavaScript

Question

How I can add the element's of class using JavaScript

<div class="col-md-4 col-xs-6 work-item web-design" id=SetCategory">
.
.
<script>
        document.getElementById("SetCategory").classList.add({{ $category->name }}' ');
</script>
.
.
</div> <!-- end work-item -->

In my display the <script> do not work.

PS $category->name is food , shop , travel , hotel , route since the name of category that cause different display when I click button

Answer 1

This seems like college/university assignment and is not the purpose of stack overflow we not here to help anyone cheat as you should be aware of taking help from this website requires Citation.

your problem is this,

document.getElementById("SetCategory").classList.add({{ $category->name }}' ')

It's not valid Javascript it's not even valid C Syntax.

1) Please learn how to use the web browsers inspector (Console Tab) using chrome, firefox, Edge & IE 11 press F12, as it would show you an error along the lines of Uncaught SyntaxError: Unexpected token { in the console output.

2) Javascript in browsers has an amazing documentation resource called, MDN checkout: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList particularly line 9 of the first code example on the page, that code example for posterities sake is:

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);