Changing Component Prop Values in Page JavaScript | Astro Lounge | Page 1

Here is my code:

<Layout title="Register">
    <div class="w-full min-h-screen absolute bg-zinc-800 sm:bg-zinc-900 flex flex-row justify-center items-center">
        <div class="md:w-[50%] hidden md:block text-center text-white text-6xl font-bold">Welcome 👋</div>
        <div class="relative bg-zinc-800 p-8 flex flex-col justify-center w-full md:w-[50%] md:rounded-s-md">
            <div class="text-white text-2xl font-bold">Register</div>
            <Break type="md" />
            <Input
                id="username-input"
                type="text"
                title="Username"
                description="This is your public display name."
                warning="Invalid username."
            />
            <Break type="sm" />
            <Input id="password-input" type="password" title="Password" warning="Invalid password." />
            <Break type="sm" />
            <Input id="confirm-password-input" type="password" title="Confirm Password" />
            <Break type="lg" />
            <Button id="register-button" type="lgAccented" title="Register" />
            <Break type="lgVisible" />
            <div class="text-white text-xs font-thin text-center">
                Already have an account? <Link href="/login">Log in</Link>
            </div>
        </div>
    </div>
</Layout>

<script>
    const usernameInput = document.getElementById(
        "username-input",
    ) as HTMLInputElement;

    usernameInput.addEventListener("focus", (event) => {
        const target = event.target as HTMLInputElement;
        // Change warning here
    });
</script>

All the text inputs have an optional prop named "warning" that shows warning text when a value is passed through. I want to change it's value every time the input is focused from the script.

#Changing Component Prop Values in Page JavaScript