Javascript 当到达容器边缘时，进行俯冲移动和反弹

我试图在到达容器边缘后移动并反弹

div

我正在使用此代码执行此操作，但调试器显示的此错误

无法读取未定义的属性“offsetWidth”

var speed = 10,
     direction = 1;

     var ballElement = document.getElementsByClassName('ball'),
         containerElement = document.getElementsByClassName('mainDiv');
     if (ballElement) {
        var boxLeftPos = ballElement.offsetLeft,
            boxRightPos = boxLeftPos + ballElement.offsetWidth;

            if (boxRightPos > document.containerElement.offsetWidth) {
                direction = -1;
            }

            if (boxLeftPos < 0) {
                direction = 1;
            }

            ballElement.style.left = (boxLeftPos + speed * direction) + 'px';
     }  

---

文档。containerElement

是未定义的，从外观上看它应该是

containerElement

文档。containerElement

是未定义的，从外观上看它应该是

containerElement
文档的结果。getElementsByClassName

是

节点列表

对象因此，它没有偏移宽度或样式。您可以改为使用

document.querySelector（'.ball'）

，或者使用

containerElement[0]

文档的结果。getElementsByClassName是一个

节点列表

对象。因此，它没有偏移宽度或样式。您可以改为使用

document.querySelector（'.ball'）

，或者使用

containerElement[0]

getElementsByClassName

返回数组。如果该类只有一个元素，请添加[0]以检索它：

getElementsByClassName（'ball'）[0]

从

if（boxRightPos>document.containerElement.offsetWidth）中删除
文档。

工作演示：
getElementsByClassName
返回一个数组。如果该类只有一个元素，请添加[0]以检索它：
getElementsByClassName（'ball'）[0]

从
if（boxRightPos>document.containerElement.offsetWidth）中删除
文档。

工作演示：

if (boxRightPos > document.containerElement.offsetWidth)