Делал проект на фласке, написал шаблоны, загрузил 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 тоже я планировал переписать без перебора в ифах.
