Не удается прочитать свойство 'addEventListener' null

Question

Я решил написать преобразователь текста в речь на JS но почему-то у меня не работает. В консоле пишет (Uncaught TypeError: Cannot read properties of null (reading'addEventListener') at work.js:11:10) Ниже прикрепляю код. Помогите пожалуйста.

<!DOCTYPE html>
<head>
    <script src="work.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Текст для озвучки</p>
    <p>
        <textarea id="message">Привет! Тестовая версия</textarea>
    </p>
    <button id="speak">Озвучить</button>
</body>

    function speak(text) {
    const message = new SpeechSynthesisUtterance();
    message.lang = "ru-RU";
    message.text = text;
    window.speechSynthesis.speak(message);
}

const btnSpeak = document.querySelector("#speak");
const txtMessage = document.querySelector("#message");

btnSpeak.addEventListener("click", () => {
    speak(txtMessage.value);
});

Answer 1

Добавьте ожидание загрузки страницы.

window.onload = () => {
    function speak(text) {
        const message = new SpeechSynthesisUtterance();
        message.lang = "ru-RU";
        message.text = text;
        window.speechSynthesis.speak(message);
    }

    const btnSpeak = document.querySelector("#speak");
    const txtMessage = document.querySelector("#message");

    btnSpeak.addEventListener("click", () => {
        speak(txtMessage.value);
    });
};

БЛОГ НА HUSL

Не удается прочитать свойство 'addEventListener' null

Ответы (1 шт):