@foxiko

DOM банально не работает. В чем дело?

Делал проект на фласке, написал шаблоны, загрузил JS в статические файлы, а он не работает. Файл точно загрузился, переменные объявлены, еще и css работает, но конструкции типа document.getElementById(...) не работают, хотя если их скопировать в консоль браузера, элемент находится.

Вот такой вот HTML генерируется:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <script src="/static/js/script.js"></script>
    <meta charset="UTF-8">
    <title>Главная — YT-Upload</title>
</head>
<body>
    <header>
        <img src="/static/images/cloud-computing.png">
        <div id="header-text">
            <h1>YT-Upload</h1>
            <h2>Загрузка видео из YouTube в облако</h2>
        </div>
    </header>
    <main>
        
    <div id="data-input">
        <p>Введите ссылку на видео:</p>
        <input type="text" placeholder="youtube.com..." id="youtube-link">
        <p class="error-text"> </p>
        <hr>

        <p>Выберите облачный диск:</p>
        <select id="cloud-select">
            <option>MEGA</option>
        </select>
        <p class="error-text"> </p>
        <hr>

        <p>Введите данные облачного диска:</p>
        <input type="text" placeholder="логин" id="login">
        <p class="error-text"></p>
        <input type="password" placeholder="пароль" id="password">
        <p class="error-text"> </p>
        <button id="start-button">Начать!</button>
    </div>

    </main>

</body>
</html>


А вот такой JS:
const EMPTY_INPUT = "Поле должно быть заполненным!";
const linkRegexp =  /^(https?:\/\/)?([\w\.]+)\.([a-z]{2,6}\.?)(\/[\w\.]*)*\/?$/

var cloudSelect;
var linkInput;
var loginInput;
var passwordInput;
var errorLabels;
var startButton;

cloudSelect = document.getElementById('cloud-select');
linkInput = document.getElementById('youtube-link');
loginInput = document.getElementById('login');
passwordInput = document.getElementById('password');
errorLabels = document.getElementsByClassName('error-text');
startButton = document.getElementById('start-button');
startButton.addEventListener('click', startProcess);


const startProcess = ()=> {
    // youtube link input check
    if (!linkInput.value.toString().match(linkRegexp)) {
        errorLabels[0].innerHTML = EMPTY_INPUT;
    } else {
        errorLabels[0].innerHTML = '';
    }
    // login input check
    if (loginInput.value.trim() == '') {
        errorLabels[1].innerHTML = EMPTY_INPUT;
    } else {
        errorLabels[1].innerHTML = '';
    }
    // password input check
    if (passwordInput.value.trim() == '') {
        errorLabels[2].innerHTML = EMPTY_INPUT;
    } else {
        errorLabels[2].innerHTML = '';
    }
}


В консоли вылетает, что, мол, startButton у вас null, и вообще вот вам TypeError.
Переменные так странно объявлены потому что я от безуспешности пытался присвоить значения в событии document.onload.

На содержимое HTML не обращайте внимания :D - нужен бывает мне такой инструмент. И код JS тоже я планировал переписать без перебора в ифах.
  • Вопрос задан
  • 527 просмотров
Решения вопроса 1
sergey-gornostaev
@sergey-gornostaev Куратор тега Flask
Седой и строгий
Flask тут вообще не при чём. Ваш скрипт начинает выполняться сразу, как только загрузится, а загружается он раньше, чем страница. Либо перенесите тег <script> перед закрывающим тегом </body>, либо весь код внутрь обработчика DOMContentLoaded.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@777Polar_Fox777
Как и написали выше, все дело в том, что скрипт начинает выполнение до полной загрузки страницы. В дополнение скажу, что ещё можно использовать defer или type="module"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы