Почему DOM-Element не присваивается переменной?

Question

[WhiteBachelor]

Не могу понять проблему. Пытаюсь сделать скрипт для манипуляции с css-стилями.
Вот так не работает:

const widther  = document.getElementById('width');
const block       = document.getElementById('block');

function review() {
    block.style.width = widther.value + "px";
    document.getElementById('width-value').innerHTML = widther.value;
}

А вот так почему-то работает:

function review() {
    document.getElementById('block').style.width = document.getElementById('width').value + "px";
    document.getElementById('width-value').innerHTML = document.getElementById('width').value;
}

Comments

[alex]

все работает

Answer 1

[AngReload]

В этом коде есть небольшая разница:
В первом случае идёт сразу ищутся widther и block, а затем при вызове функции присваивается размеры и значения.
Во втором случае поиск widther и block происходит в момент запуска функции.

Разверните спойлер, если хотите увидеть разницу более наглядно

Ваш первый вариант кода:

const widther  = document.getElementById('width');
const block       = document.getElementById('block');
function review() {
    block.style.width = widther.value + "px";
    document.getElementById('width-value').innerHTML = widther.value;
}

Ваш второй вариант кода:

function review() {
    const widther  = document.getElementById('width');
    const block       = document.getElementById('block');
    block.style.width = widther.value + "px";
    document.getElementById('width-value').innerHTML = widther.value;
}

По этому, если перед запуском функции из второго варианта кода произошло удаление элементов с id width или block, то код перестанет работать.

Разверните спойлер, если хотите увидеть как это может произойти

Ваш первый вариант кода:

const widther  = document.getElementById('width');
const block       = document.getElementById('block');

// удаляем элемент со страницы
widther.remove();

function review() {
    // работает так как мы заранее сохранили переменные
    block.style.width = widther.value + "px";
    document.getElementById('width-value').innerHTML = widther.value;
}

Ваш второй вариант кода:

// удаляем элемент со страницы
document.getElementById('width').remove();

function review() {
    // перестанет работать, так как поиск на странице уже не находит этого элемента
    const widther  = document.getElementById('width');
    const block       = document.getElementById('block');
    block.style.width = widther.value + "px";
    document.getElementById('width-value').innerHTML = widther.value;
}

Comments

[WhiteBachelor]

Короче, что-то типа инкапсуляции. Я правильно понимаю?