Fatal编程技术网
  • javascript/
  • document.getElementByClassName找不到Javascript内部类

document.getElementByClassName找不到Javascript内部类

javascript

document.getElementByClassName找不到Javascript内部类,javascript,getelementsbyclassname,Javascript,Getelementsbyclassname,我正在制作一个物理引擎，它利用JavaScript来创建具有物理属性的框，这些属性按窗口大小的比例应用于它们。但是，函数document.getElementByClassName（“box”）找不到包含这些框的所有物理属性的名为box的类 我试图分配一个变量boxelem，以包含每个单独框的位置属性，以便将来可以将鼠标操作集成到我的程序中。我已尝试通过代码执行此操作： var-boxelem=document.getElementsByClassName（“box”） 然后将鼠标悬停事件侦听器

我正在制作一个物理引擎，它利用JavaScript来创建具有物理属性的框，这些属性按窗口大小的比例应用于它们。但是，函数
document.getElementByClassName（“box”）
找不到包含这些框的所有物理属性的名为box的类

我试图分配一个变量
boxelem
，以包含每个单独框的位置属性，以便将来可以将鼠标操作集成到我的程序中。我已尝试通过代码执行此操作：
var-boxelem=document.getElementsByClassName（“box”）
然后将鼠标悬停事件侦听器添加到boxelem

必要代码：


var canvas;
var ctx;
var box = [];
var boxelem;

//Startup Code
window.onload = function(e) {
    canvas = document.getElementById("c");
    ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    box = [new box(10, 20, "cyan"), new box(299, 40, "red"), new box(90, 50,
      "black"), new box(29, 20, "turquoise")];
    boxelem = document.getElementsByClassName("box");
    noscroll();
    update();
  }

  //Physic Clock (For real-time physics)
var clock = {
    lasttick: 0,
    tick: function() {
      var td = performance.now() - this.lasttick;
      this.lasttick = performance.now();
      return td / 1000;
    },
    reset: function() {

    }
  }

  //Box objects be created here (Box Class)
var box = function(x, y, color) {
  var _this = this;
  //First Spawn Physics and Settings
  _this.x = Math.random() * (canvas.width - 50);
  _this.y = Math.random() * (canvas.height - 50);
  _this.vx = 0;
  _this.vy = Math.random() * 150;
  _this.ax = 0;
  _this.ay = 440;
  _this.color = color;

  _this.draw = function() {
      ctx.fillStyle = _this.color;
      ctx.fillRect(_this.x, _this.y, 50, 50);
    }

    //Normal Physics
  _this.update = function(t, mX, mY) {
    if (mX != 0) {
      _this.x += _this.vx * t;
      _this.vx += mX * t;
    } else {
      _this.x += _this.vx * t;
      _this.vx += _this.ax * t;
    }
    _this.y += _this.vy * t;
    _this.vy += _this.ay * t;

    //Boundary Creation
    if ((_this.y + 55) > canvas.height) {
      _this.vy -= _this.ay * t;
      _this.vy = 0;

    }
    if ((_this.x + 55) > canvas.width) {
      _this.vx -= _this.ax * t;
      _this.vx = 0;
    }
    if ((_this.y) < 0) {
      _this.vy -= _this.ay * t;
      _this.vy = 0;
      _this.y = (canvas.height + 20);
    }
    if ((_this.x) < 0) {
      _this.vx -= _this.ax * t;
      _this.vx = 0;
    }
  }
}

//Get mouse position if over a box
var pageX = 0;
var pageY = 0;
for (var z = 0; z < box.length; z++) {
  boxelem.addEventListener("mouse", mPos, false);
}



我已经查看了（）和（），但不确定如何将其应用于我的问题。
您的循环主体没有访问索引。另外，您使用的
.length
来自
框
函数，而不是
框
集合

这：


我没有看到带有类
框的元素。因此，方法
document.getElementsByClassName（“box”）
总是返回一个空数组。document.getElementByClassName（）的可能重复引用JS中实例化的类而不是HTML@D.Simon
document.getElementsByClassName（“box”）
查找具有给定类的HTML元素。因为JS没有真正的类，所以找不到JavaScript
类
。我现在明白了，尽管我如何引用box类的元素而不在HTML中创建类？你是对的。但是实际的问题是，
boxelem
没有定义。@D.Simon:谢谢，我也添加了一个关于这一点的注释。这意味着将fetch语句移动到window.onload函数之前，对吗？@KyleMyott:如果这样做，并且脚本位于页面顶部，那么它将返回一个空集合。您可以在
窗口中移动所有代码。onload
，或者在页面加载时运行的另一个事件

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
     <script type=text/javascript src="Physics.js"></script>
     <meta charset="utf-8" />
     <title>Physics Engine of Boxes</title>
 </head>
 <body>
     <canvas id="c"></canvas>
</body>
</html>



for (var z = 0; z < box.length; z++) 
{
  boxelem.addEventListener("mouse", mPos, false);
}



for (var z = 0; z < boxelem.length; z++) 
{
  boxelem[z].addEventListener("mouse", mPos, false);
}



//Startup Code
window.onload = function(e) {
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var box = [new box(10, 20, "cyan"), new box(299, 40, "red"), new box(90, 50,
      "black"), new box(29, 20, "turquoise")];
    var boxelem = document.getElementsByClassName("box");
    noscroll();
    update();

    //Physic Clock (For real-time physics)
    var clock = {
        lasttick: 0,
        tick: function() {
          var td = performance.now() - this.lasttick;
          this.lasttick = performance.now();
          return td / 1000;
        },
        reset: function() {

        }
      }

    //Box objects be created here (Box Class)
    var box = function(x, y, color) {
      // ...implementation...
    }

    //Get mouse position if over a box
    var pageX = 0;
    var pageY = 0;
    for (var z = 0; z < boxelem.length; z++) {
      boxelem[z].addEventListener("mouse", mPos, false);
    }
}