My PHP code cant working due to javascript toggle password visibility [closed]

<?php
// process_login.php
include 'functions.php';

    session_start();


    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Database connection parameters
        $host = 'localhost'; // usually 'localhost'
        $username = 'root';
        $password = '';
        $database = 'kasrifqi';

        // Create a connection
        $conn = new mysqli($host, $username, $password, $database);

        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        // Retrieve username and password from the form
        $username = $_POST['username'];
        $password = $_POST['password'];

        // Use prepared statement to prevent SQL injection
        $loginQuery = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
        $result = $conn->query($loginQuery);
        $arr = [];
        while ($row = $result->fetch_assoc()) {
            $arr = $row;
        }



        // Check if the user exists
        if ($result->num_rows > 0) {
            // Fetch the user data
            $_SESSION['username'] = $username;
            header("Location: index.php");
        }
    }
    ?>

    <html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <script src="mata.js" defer></script>
        <link href="layout/stylez.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="login">
            <h1>Sign In</h1>
            <form action="process_login.php" method="post"> <!-- Changed form action -->
                <label for="username">
                    <i class="fas fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                <label for="password" class="kunci">
                    <i class="fas fa-lock "></i>
                </label>
                <p>
                <input for="fieldpass" type="password" name="password" placeholder="Password" id="password" required>
            
                <i class="bi bi-eye-slash logo" id="togglePassword"></i>
                
            </p>
                <input type="submit" value="Login">
            </form>
            <p style="text-align: center; margin-top: 10px; font-size: 14px; display: flex; justify-content: center;">
    Belum punya akun? Daftar&nbsp;<a href="register.php" style="text-decoration: none; color: #3274d6;">Disini</a>
</p>

        </div>
        
    </body>
    </html>

here is my js

document.addEventListener("DOMContentLoaded", function() {
    const togglePassword = document.querySelector("#togglePassword");
    const password = document.querySelector("#password");

    togglePassword.addEventListener("click", function () {
        // Toggle the type attribute of the password input
        password.type = password.type === "password" ? "text" : "password";
        
        // Toggle the eye icon
        togglePassword.classList.toggle("bi-eye");
        togglePassword.classList.toggle("bi-eye-slash");
    });

    // Prevent form submission
    const form = document.querySelector("form");
    form.addEventListener('submit', function (e) {
        e.preventDefault();
    });
});

i just want to fix the login button,but i cannot fix it help