DOM just doesn't work. What's the matter?

F

foxiko2019-08-17 20:02:41

JavaScript

foxiko, 2019-08-17 20:02:41

I made a project on a flask, wrote templates, uploaded JS to static files, but it doesn't work. The file was definitely loaded, the variables were declared, and css also works, but constructions like document.getElementById(...) do not work, although if you copy them to the browser console, the element is located.
This is the HTML that is generated:

<!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>

And here's the 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 = '';
    }
}

It crashes in the console that, they say, your startButton is null, and in general, here's a TypeError for you.
Variables are so strangely declared because I unsuccessfully tried to assign values in the document.onload event.
Don't pay attention to the HTML content :D - sometimes I need such a tool. And I also planned to rewrite the JS code without iterating in ifs.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey Gornostaev, 2019-08-17
@foxiko

Flask has nothing to do with it at all. Your script starts executing as soon as it loads, and it loads before the page. Either move the tag <script>before the closing tag </body>, or wrap the whole code inside the DOMContentLoaded handler .

7

777Polar_Fox777, 2019-08-19
@777Polar_Fox777

As written above, the whole point is that the script starts executing before the page is fully loaded. In addition, I will say that you can also use defer or type="module"