Почему элемент в консоле неопределён?

Question

[Alex_87]

Здравствуйте! Подскажите пожалуйста, почему может быть не определён элемент в консоле? В коде он есть и браузер его отображает.

Comments

[Stanislav]

Вам показан результат присваивания, а не значение link, введите link и получите ваше значение...

[Alex_87]

Stasgar: у меня ещё один вопрос.... Есть код:

window.onresize = function() {
          if(window.matchMedia("(max-width: 560px)").matches){

Он начинает работает при изменении окна до 560 px. Но если перегрузить страницу, правила не действует. Он не понимает, что находиться в этом размере, соответственно правила под эти размеры не действуют.

[Stanislav]

Alex_87: вы куда этот код пишите?

[Alex_87]

Stasgar: в тег script, в конце страницы, перед body.

[Stanislav]

Alex_87: почитайте про событие onresize - оно срабатывает только, когда изменяют размер окна...

[Alex_87]

Stasgar: Да, я уже это понял... А есть событие, которое связывает это событие и правило учитывающее размер окна при перезагрузки?

[Stanislav]

Alex_87: ну так и проверяйте при загрузке

window.onresize = function() {
    if(window.matchMedia("(max-width: 560px)").matches){
        doSomething();
    }
}
window.onload = function(){
    if(window.matchMedia("(max-width: 560px)").matches){
        doSomething();
    }
}

function doSomething(){
    // что хотите делать при 560px
}

[Stanislav]

Alex_87: я не знаю чего вы хотите достичь, но если вы хотите менять стили, то в css есть встроенные media.

[Alex_87]

Stasgar: Спасибо за код! По нему видно, что рабочий... Я пробовал свои подстроить под него, но немного запутался, не сработал... Вы бы не могли мне помочь? Первый раз с javascript работаю...
Вот код:

var link = document.querySelector("#nav-toggle");
            var menu = document.querySelector(".menu");
        window.onresize = function() {
          if(window.matchMedia("(max-width: 560px)").matches){
              document.querySelector('.menu').classList.add('resized');
              document.querySelector('#nav-toggle').classList.add('notransporent');

                  link.addEventListener("click", function(event) {
                  event.preventDefault();
                  menu.classList.remove('resized');
                  menu.classList.add('show');
              });

          }
          else {
           document.querySelector('.menu').classList.remove('resized');
          document.querySelector('#nav-toggle').classList.remove('notransporent');

   }
};

[Stanislav]

Alex_87:
Почитайте сначала про Media в CSS, мне кажется JS здесь лишний.

(function(){
    window.onresize = function() {
        doDich();
    }
    window.onload = function(){
        doDich();
    }

    function doDich(){
        if(window.matchMedia("(max-width: 560px)").matches){
            add();
        }
        else
        {
            remove();
        }
    }

    function add(){
        document.querySelector('.menu').classList.add('resized');
        document.querySelector('#nav-toggle').classList.add('notransporent');

        link.addEventListener("click", function(event) {
            event.preventDefault();
            menu.classList.remove('resized');
            menu.classList.add('show');
        });
    }

    function remove(){
        document.querySelector('.menu').classList.remove('resized');
        document.querySelector('#nav-toggle').classList.remove('notransporent');
    }
})();

[Alex_87]

Stasgar: Спасибо вам большое за помощь!!! Я хочу использовать js для адаптивного меню. Плюс, ещё хочу и потренироваться! ... Второй ваш код разрывает логику моего кода. Он сложнее! Да, он хороший, хотя при загрузки видно то, что не должно быть видно), но он рабочий! Я проверю сейчас ваш первый код!

[Alex_87]

Stasgar: Попробовал... Не работает, не понимаю, где ошибка?

window.onresize = function() {
    if(window.matchMedia("(max-width: 560px)").matches){
        doSomething();
    }
};
window.onload = function(){
    if(window.matchMedia("(max-width: 560px)").matches){
        doSomething();
    }
};

function doSomething(){
    var link = document.querySelector("#nav-toggle");
    var menu = document.querySelector(".menu");

               document.querySelector('.menu').classList.add('resized');
               document.querySelector('#nav-toggle').classList.add('notransporent');

               link.addEventListener("click", function(event) {
               event.preventDefault();
               menu.classList.remove('resized');
               menu.classList.add('show');
          });
else {
           document.querySelector('.menu').classList.remove('resized');
          document.querySelector('#nav-toggle').classList.remove('notransporent');
   }
 }

[Stanislav]

Alex_87: смотрите консоль.

[Alex_87]

Stasgar: Думал, что так, но ошибся

window.onresize = function() {

        doSomething();

};
window.onload = function(){

        doSomething();

};

function doSomething(){
    var link = document.querySelector("#nav-toggle");
    var menu = document.querySelector(".menu");
          if(window.matchMedia("(max-width: 560px)").matches){
               document.querySelector('.menu').classList.add('resized');
               document.querySelector('#nav-toggle').classList.add('notransporent');

               link.addEventListener("click", function(event) {
               event.preventDefault();
               menu.classList.remove('resized');
               menu.classList.add('show');
          });
else {
          document.querySelector('.menu').classList.remove('resized');
          document.querySelector('#nav-toggle').classList.remove('notransporent');
   }
  }
 }

[Stanislav]

Alex_87: я говорю смотрите в консоль, какие там ошибки?

[Alex_87]

Stasgar: ) Не сразу понял...


Конкретно:

[Stanislav]

Alex_87: ну, вы не видите очевидной ошибки в своем коде? Подсказка: if(){}else{}

[Alex_87]

Stasgar: К сожалению не вижу... Перепробовал разные ситуации, удаляя и добавляя кавычки, но ....

[Stanislav]

Alex_87: вы никогда в жизни не программировали до этого?

[Stanislav]

Alex_87: я вам в последний раз говорю - для того, что вы пытаетесь сделать НЕ НУЖЕН JavaScript. Используйте CSS MEDIA!

[Alex_87]

Практически нет... По php решал задачи на массивы, функции, циклы. Задачи по формам. По js только теория.... Проблема в том, что NetBeans не показывает ошибок. Всё кавычки нормально подсвечиваются... Возможно, я потерял внимание!

[Alex_87]

Stasgar: Возможно, что здесь нужны MEDIA, но какая ошибка у меня?

[Stanislav]

Alex_87: перед else уберите ");"

[Alex_87]

Подстава)) Я хренею, такого ещё не было!

Answer 1

[Егор Живагин]

Второй строчкой сделайте
console.log(link);

Comments

[Alex_87]

Есть код:

window.onresize = function() {
          if(window.matchMedia("(max-width: 560px)").matches){

Он начинает работает при изменении окна до 560 px. Но если перегрузить страницу, правила не действует. Он не понимает, что находиться в этом размере, соответственно правила под эти размеры не действуют.

[Егор Живагин]

Alex_87: а, так на window.onload ещё эту функцию повесить надо, или на что-нибудь подобное

[Alex_87]

Егор Живагин: Попробовал, но почему-то не работает... Подскажите, в чём ошибка?

Answer 2

[Антон Швец]

Потому что оператор var ничего не возвращает.
Сравни в консоли
var a=5;
и

var a;
a=5;

Comments

[Alex_87]

Вопрос... Есть код:

indow.onresize = function() {
          if(window.matchMedia("(max-width: 560px)").matches){

Он начинает работает при изменении окна до 560 px. Но если перегрузить страницу, правила не действует. Он не понимает, что находиться в этом размере, соответственно правила под эти размеры не действуют.

Answer 3

[Islam Ibakaev]

введи в консоли $('.logo')