JavaScript-“无法读取null的属性'querySelector'错误”

JavaScript代码给出了一个错误。我找了，但找不到。我使用的jquery脚本可能有问题

错误：

未捕获的TypeError:无法读取null的属性“querySelector”

var btn=document.querySelector'.btn'； var btnFront=btn.querySelector'.btn front'， btnYes=btn.querySelector'.btn back.yes'， btnNo=btn.querySelector'.btn back.no'； btnFront.addEventListener'click'，functionevent{ var mx=event.clientX-btn.offsetLeft， my=event.clientY-btn.offsetTop； var w=btn.offsetWidth， h=btn。远视； 变量方向=[{ id:'顶部'， x:w/2， y:0 }, { id:'对'， x:w， y:h/2 }, { id:'底部'， x:w/2， y:h }, { id:'左'， x:0,， y:h/2 } ]; 方向。SortFunction A，b{ 返回distancemx，my，a.x，a.y-distancemx，my，b.x，b.y； }; btn.setAttribute'data-direction'，directions.shift.id； 添加'is-open'； }; 你确定要这么做吗

对 不 删去 我刚刚添加了$document.readyfunction，它实现了

$( document ).ready(function() {
   
var btn = document.querySelector( '.btn' );

var btnFront = btn.querySelector( '.btn-front' ),
    btnYes = btn.querySelector( '.btn-back .yes' ),
    btnNo = btn.querySelector( '.btn-back .no' );

btnFront.addEventListener( 'click', function( event ) {
  var mx = event.clientX - btn.offsetLeft,
      my = event.clientY - btn.offsetTop;

var w = btn.offsetWidth,
      h = btn.offsetHeight;
    
  var directions = [
    { id: 'top', x: w/2, y: 0 },
    { id: 'right', x: w, y: h/2 },
    { id: 'bottom', x: w/2, y: h },
    { id: 'left', x: 0, y: h/2 }
  ];
  
  directions.sort( function( a, b ) {
    return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
  } );
  
  btn.setAttribute( 'data-direction', directions.shift().id );
  btn.classList.add( 'is-open' );

} );

btnYes.addEventListener( 'click', function( event ) {   
  btn.classList.remove( 'is-open' );
} );

btnNo.addEventListener( 'click', function( event ) {
  btn.classList.remove( 'is-open' );
} );

function distance( x1, y1, x2, y2 ) {
  var dx = x1-x2;
  var dy = y1-y2;
  return Math.sqrt( dx*dx + dy*dy );
}
});

---

它与jQuery文档无关。querySelector是纯Javascript。运行此代码时，DOM上可能没有类为btn的元素。您是否等待文档的就绪事件？谢谢您提供的信息。我没有使用文档就绪。我会试着让它发生。非常感谢^^距离没有定义。