web开发报错合集（基于openlayers）

1、Uncaught TypeError: Cannot read properties of undefined (reading 'getViewport')

 

 代码：（位于代码页最上面）

        // 添加一个按钮，用于触发样式函数
        var button = document.createElement('button');
        button.innerHTML = 'inSec';
        button.style.position = 'absolute';//？
        button.style.top = '1px';
        button.style.right = '40px';
        map.getViewport().appendChild(button);

        // 当按钮被点击时，重新设置样式函数
        button.onclick = function() {
    
        };

reason：

当前getViewport标签没有定义，html的执行顺序是从上到下，在标签还没有加载的时候该方法就被调用了，所以会出没有定义的错误。

 因此需要调整当前js代码顺序

参考：https://blog.csdn.net/mini_1251861209/article/details/81867575

2、将上述代码改为代码位置最下面

 

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

reason：Cannot read properties of 都是渲染错误 不能获取属性。因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。

1、addEventListener 放在绑定的元素添加渲染完成后再使用；

2、使用 window.onload 或 $(document).ready()

window.οnlοad=function(){
    // code
};
$(document).ready(function () {
    // code
});

参考：https://blog.csdn.net/Tsailing666/article/details/128076116

 

3、学习如何创建button及绑定对应的功能

 使用事件属性的方式进行添加bt并赋予对应的fun功能

    <div id="map">
        <button>addpoly</button>
        <!-- <button id="bt2">insec</button> -->
        </div>

var a = documemt.querySelector('button');
a.onclick = function() {
     console.log('xxx')；
}

注意！这里使用的方法是querySelector()，选择的是DOM树的对象button；如果传入的参数是 bt2 ，则因为bt2是id ，会显示报错。（如要使用id，可以使用getElementById（）方法）。