Как объяснить происходящее? document / jquery

Question

document.querySelector('#msg-input').value+=12;

При попытке использовать данную строку кода в консоли браузера появляется ошибка: Uncaught TypeError: Cannot read property 'value' of null at :1:10

Но если предварительно нажать правой кнопкой на элементе и нажать "Просмотреть код" то код становится рабочим.

Попытку выполнить код делаю после полной загрузки страницы.

UPDATE: Оказывается внутри документа был фрейм с другим документом.

document.querySelectorAll('iframe')[0].contentWindow.document.querySelector('#msg-input').value=11221317;

Answer 1

Пишу с телефона, по этому не уверен в правильности:

document.body.addEventListener('DOMNodeInserted', (e) =>
{
    if (e.target.id == 'msg-input')
    {
        e.target.value += 12;
    }
});

Answer 2

Подозреваю, что элемент находится в iframe. Когда вы просто открываете консоль, она работает в контексте главного окна. Но если вы щелкните на элементе внутри iframe, посмотрите его в дереве элементов, а потом переключитесь в консоль, она тоже переключит контекст на этот фрейм. Над полем ввода консоли находится ниспадающий список всех возможных контекстов. Если там не top, значит код запускается не в контексте главного окна.

БЛОГ НА HUSL

Как объяснить происходящее? document / jquery

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