未捕获的typeerror：无法读取null的属性'queryselector' [英] Uncaught typeerror: cannot read property 'queryselector' of null

问题描述

当我在浏览器上启动此代码时，我收到了错误消息。

未捕获TypeError：无法在script.js读取null 
的属性'querySelector'：136 
 at script.js：188 
（匿名）@ script.js：136 
（匿名）@ script.js：188 

我不知道知道该怎么做。你能帮帮我吗？

  / *  搜索标题开头* /  
（ function （）{
  var  isAnimating; 
  var  morphSearch =  document  .getElementById（'  morphsearch'），
第136行 - > input = morphSearch.querySelector（'  input.morphsearch-input'），
 ctrlClose = morphSearch.querySelector（'  span.morphsearch-close'），
 isOpen = isAnimating =  false ，
 isHideAnimate = morphsearch.querySelector（' 。morphsearch-form'） ，
  //  显示/隐藏搜索区域 
 toggleSearch = 函数（evt）{
  //  如果打开则返回并且输入得到集中 
  if （evt.type.toLowerCase（）=== '  focus'&& isOpen） return   false ; 
 
  var  offsets = morphsearch.getBoundingClientRect（）; 
  if （isOpen）{
 classie.remove（morphSearch，' 开'）; 
 
  //  搜索覆盖关闭后隐藏输入文字的技巧 
  //   todo：硬编码时间，应在转换结束后完成 
  //   if（input.value！==''）{ 
 setTimeout（ function （）{
 classie.add（morphSearch，'  hideInput' ）; 
 setTimeout（ function （）{
 classie.add（isHideAnimate， '  p-absolute'）; 
 classie.remove（morphSearch，'  hideInput' ）; 
 input.value = ' '; 
}， 300 ）; 
}， 500 ）; 
  //  }  
 
 input.blur（）; 
}  else  {
 classie.remove（isHideAnimate，'  p-绝对）; 
 classie.add（morphSearch，'  open'）; 
} 
 isOpen =！isOpen; 
}; 
 
  //   events  
 input.addEventListener（'  focus'，toggleSearch）; 
 ctrlClose.addEventListener（' 点击'，toggleSearch）; 
  //   esc键关闭搜索覆盖 
  //  键盘导航事件 
  document  .addEventListener（'  keydown'， function （ev）{
  var  keyCode = ev.keyCode || ev.which; 
  if （keyCode ===  27 &&& isOpen）{
 toggleSearch（ev）; 
} 
}）; 
  var  morphSearch_search =  document  .getElementsByClassName（'   morphsearch-search'）; 
 $（ 。morphsearch-search）。on（' 点击，toggleSearch）; 
 
  / *   ****仅用于演示目的：不允许提交表单***** /  
 morphSearch.querySelector（'  button [type =submit ]'）。addEventListener（'  click'，功能（ev）{
 ev.preventDefault（）; 
}）; 
 line  188   - > }）（）; 
  / *  搜索标题结束* /  

我尝试了什么：



我试图删除代码......但我得到了同样的错误。

解决方案

（ .morphsearch-search）。on（' 点击'，toggleSearch）;

/ * ****仅用于演示目的：不允许提交表单***** /
morphSearch.querySelector（' button [type =submit ]'）。addEventListener（' click'，功能（ev）{
ev.preventDefault（）;
}）;
line 188 - > }）（）;
/ * 搜索标题结束* /

我尝试了什么：



我试图删除代码......但是我得到了同样的错误。

显然，你的页面上没有id morphsearch 的任何元素。

要清楚，以下行（135）不会返回值：

  var  morphSearch =  document  .getElementById（'  morphsearch'），
 

你真的需要阅读空引用以及如何测试和纠正它们。

When I launch this code on browser, I got the error.

Uncaught TypeError: Cannot read property 'querySelector' of null
    at script.js:136
    at script.js:188
(anonymous) @ script.js:136
(anonymous) @ script.js:188

I don't know how to do. Can you please help me?

/* Search header start */
(function() {
    var isAnimating;
    var morphSearch = document.getElementById('morphsearch'),
    line 136--> input = morphSearch.querySelector('input.morphsearch-input'),
    ctrlClose = morphSearch.querySelector('span.morphsearch-close'),
    isOpen = isAnimating = false,
    isHideAnimate = morphsearch.querySelector('.morphsearch-form'),
        // show/hide search area
        toggleSearch = function(evt) {
            // return if open and the input gets focused
            if (evt.type.toLowerCase() === 'focus' && isOpen) return false;

            var offsets = morphsearch.getBoundingClientRect();
            if (isOpen) {
                classie.remove(morphSearch, 'open');

                // trick to hide input text once the search overlay closes
                // todo: hardcoded times, should be done after transition ends
                //if( input.value !== '' ) {
                    setTimeout(function() {
                        classie.add(morphSearch, 'hideInput');
                        setTimeout(function() {
                            classie.add(isHideAnimate, 'p-absolute');
                            classie.remove(morphSearch, 'hideInput');
                            input.value = '';
                        }, 300);
                    }, 500);
                //}

                input.blur();
            } else {
                classie.remove(isHideAnimate, 'p-absolute');
                classie.add(morphSearch, 'open');
            }
            isOpen = !isOpen;
        };

    // events
    input.addEventListener('focus', toggleSearch);
    ctrlClose.addEventListener('click', toggleSearch);
    // esc key closes search overlay
    // keyboard navigation events
    document.addEventListener('keydown', function(ev) {
        var keyCode = ev.keyCode || ev.which;
        if (keyCode === 27 && isOpen) {
            toggleSearch(ev);
        }
    });
    var morphSearch_search = document.getElementsByClassName('morphsearch-search');
    $(".morphsearch-search").on('click', toggleSearch);

    /***** for demo purposes only: don't allow to submit the form *****/
    morphSearch.querySelector('button[type="submit"]').addEventListener('click', function(ev) {
        ev.preventDefault();
    });
line 188 --> })();
/* Search header end */

What I have tried:

I have tried to delete the code...but i got the same error.

解决方案

(".morphsearch-search").on('click', toggleSearch); /***** for demo purposes only: don't allow to submit the form *****/ morphSearch.querySelector('button[type="submit"]').addEventListener('click', function(ev) { ev.preventDefault(); }); line 188 --> })(); /* Search header end */

What I have tried:

I have tried to delete the code...but i got the same error.

Apparently, you don't have any element with id morphsearch on your page.

To be clear, the following line (135) does not return a value:

var morphSearch = document.getElementById('morphsearch'),

You really need to read up on null references and how to test for, and correct them.

这篇关于未捕获的typeerror：无法读取null的属性'queryselector'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！