Home > database >  Can I give Classnames in Tailwindcss so i can use them in javascript?
Can I give Classnames in Tailwindcss so i can use them in javascript?

Time:01-04

My Problem:

I want to give an button a classname instead of an id, but i dont know how this would work because im using tailwind

const btn = document.querySelector(".my-class");

btn.addEventListener('submit', (e) => {

    console.log("test");

});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/output.css">
    
</head>
<body>
    <button >
        test
    </button>
</body>

<script src="js/test.js"></script>
</html>

the error:

The Question:

Is there a way to assign class names while using tailwindcss?

What I've tried:

I tried to just write my own class name in the tailwind class, but that doesn't work.

CodePudding user response:

what i understand from this question is, you need event using class if button is clicked. In addEventListener use click.

const btn = document.querySelector(".my-class");

btn.addEventListener('click', (e) => {
    alert("test");
});
<body>
    <button >
        test
    </button>
</body>

CodePudding user response:

Create custom class my-class and add it inside the class list

  <button >
        test
  </button>

Change submit to click in your listener

const btn = document.querySelector(".my-class");

btn.addEventListener('click', (e) => {
    console.log("test");
});
  • Related