Fix addEventListener error

[broken-helix]

Lighthouse error:

Browser errors were logged to the console

Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more about this errors in console diagnostic audit
Source
Description
vercel.app 1st Party…js/script.js:28:12(zen-bot.vercel.app)
TypeError: Cannot read properties of null (reading 'addEventListener') at https://zen-bot.vercel.app/assets/js/script.js:28:13

Affected code

// if the user presses enter, generate the prompt
promptInput.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
        generate();
    }
});

[broken-helix]

ChatGPT suggested:

It seems like there might be an issue with the event listener for the "keyup" event on the promptInput element. Let's troubleshoot and improve the handling of the "Enter" key. Here's an updated version of your code:

// variables for key HTML elements
const promptInput = document.getElementById("userInput");
const generateBtn = document.getElementById("submitBtn");
const resultText = document.getElementById("promptOutput");

const generate = async () => {
    try {
        // Sends the user's prompt to the serverless function in api/generate.js
        const response = await fetch('/api/generate', {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ content: promptInput.value }),
        });

        const text = await response.text();
        resultText.innerText = text;
        promptInput.value = '';

    } catch (error) {
        console.error("Error:", error);
        resultText.innerText = "Error occurred while generating.";
        promptInput.value = '';
    }
};

// Handle "Enter" key press
const handleEnterKey = (e) => {
    if (e.key === "Enter") {
        e.preventDefault(); // Prevents the default action (form submission)
        generate();
    }
};

// if the user presses enter, generate the prompt
promptInput.addEventListener("keydown", handleEnterKey);

// if the user clicks the submit button, generate the prompt
generateBtn.addEventListener("click", generate);

_Changes made:

I changed the event from "keyup" to "keydown" to ensure the event fires when the key is initially pressed.

I added e.preventDefault(); to the handleEnterKey function to prevent the default behavior of the "Enter" key, which might include submitting a form and causing a page refresh.

Try this updated code, and it should handle the "Enter" key more reliably._