Javascript CSS ClassList toggle

[oondaasta]

Hello,

currently doing a barebones project to find out the capabilities of templ. Building some components and ran into the following problem:
I added this script to my templ file:
script toggleClass(id string) { document.getElementById(id).classList.toggle("toggled"); }

It is used in the component button onClick as follows:
<button onClick={ toggleShow("toggleClass")) }>{ title }</button>

Following the documentation of the toggle it should add the class to the element with the passed id if it is not there else it should remove it -> return value of the function represents the respective boolean value. This is not the case, it will always return true but it wont add the class to the element. It is not an issue with the JS code as it is working fine in the browser console.

Are there any specifics on how this kind of JS script/ dom manipulation are approached in templ?

Appreciate any help

Cheers.

[joaovitorkc]

From what I saw, you are trying to use the toggleClass function within a project using Templ, but you are having problems manipulating the DOM directly via JavaScript. I will review your code and how it is being used in the button component.

First, let's tweak the code to ensure the toggleClass function is correct and called properly in the component:

1. Adjustment of the toggleClass function:
   Make sure the function is correct in the script:

script toggleClass(id string) {
    document.getElementById(id).classList.toggle("toggled");
}

2. Correct usage in the button component:
   The toggleClass function expects an id as a parameter, so we need to make sure we are passing the id correctly. In your example, it looks like the function call is a bit confusing. Let's fix this:

<button onClick={ () => toggleClass("elementId") }>{ title }</button>

3. HTML of the element to be toggled:
   Ensure that the element with the correct id is present in the HTML and has the class that will be toggled:

<div id="elementId" class="some-class">Conteúdo</div>

4. Verification in Templ:
   Make sure Templ allows direct DOM manipulation. Some tools and frameworks may have rules or restrictions on direct manipulation of the DOM, especially if they are handling rendering or component updates reactively.

If the toggleClass function is being called correctly and the id is correct, the behavior should be as expected: the toggled class will be added to or removed from the element with the specified id.

My complete example looked like this:

<!-- Script -->
script toggleClass(id string) {
    document.getElementById(id).classList.toggle("toggled");
}

<!-- Component -->
<button onClick={ () => toggleClass("elementId") }>Toggle</button>

<!-- Element to be toggled -->
<div id="elementId" class="some-class">Content</div>

<!-- Style for viewing the change -->
<style>
.toggled {
    background-color: yellow;
}
</style>

If you liked it, follow me :)