Adding Roblox API Into HTML

Hello! I’m making a admin panel website for my game, and i’m having issues adding the Roblox API into my HTML Code. What happens is when you type the players username into the textbox, it gets the players user id and auto puts it in the user id field. Below is my JavaScript function and was hoping somebody could help me out.

async function getUserID() {
      const username = document.getElementById('usernameInput').value.trim();
      if (!username) return;

      const url = `https://users.roproxy.com/v1/usernames/users`;

      try {
        document.getElementById('usernameInput').disabled = true;

        const response = await fetch(url, {
          method: "POST",
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            "usernames": [username],
            "excludeBannedUsers": false
          })
        });

        if (!response.ok) throw new Error("Failed to fetch user ID");

        const data = await response.json();
        if (data.data && data.data.length > 0) {
          const userId = data.data[0].id;
          document.getElementById('idInput').value = userId;
        } else {
          document.getElementById('idInput').value = 'User not found on Roblox';
        }
      } catch (error) {
        console.error("Error fetching user ID:", error);
        document.getElementById('idInput').value = 'Error fetching user ID';
      } finally {
        document.getElementById('usernameInput').disabled = false;
      }
    }

I would say either you are calling getUserID() before you have proper input or some CORS restriction.
What is the current behavior? Any errors?