基于用户输入调整fabric矩形大小触发addEventListener空值报错如何解决

报错Cannot read property 'addEventListener' of null的解决方法 #

这个报错的原因是document.getElementById没有找到对应id的元素，你需要先确认HTML结构里存在id完全匹配（注意大小写敏感）的输入框和canvas元素，参考HTML结构如下：

<input type="number" id="Length" placeholder="输入长度">
<input type="number" id="Width" placeholder="输入宽度">
<canvas id="canvas" width="600" height="600"></canvas>

如果已经确认元素存在仍有报错，可以给元素绑定事件前加非空判断，避免异常：

var Length = document.getElementById("Length");
var Width = document.getElementById("Width");
// 只有元素获取成功时才绑定事件
if (Length && Width) {
  Length.addEventListener("input", Modify_Rect);
  Width.addEventListener("input", Modify_Rect);
}

现有JS逻辑的修正 #

你当前的修改逻辑存在多处问题，无法实现动态调整矩形尺寸的需求，完整的修正后代码如下：

// 第一步先初始化fabric canvas实例，你原有代码缺失这一步
var canvas = new fabric.Canvas('canvas');

var rect = new fabric.Rect({
  fill: "lightgray",
  width: 300,
  height: 400,
  stroke: "gray",
  strokeWidth: 30,
  centeredRotation: true,
  centeredScaling: true,
});
canvas.add(rect);

var Length = document.getElementById("Length");
var Width = document.getElementById("Width");

if (Length && Width) {
  Length.addEventListener("input", Modify_Rect);
  Width.addEventListener("input", Modify_Rect);
}

// 两个输入框共用同一个修改函数即可，不需要分开定义
function Modify_Rect() {
  // 直接修改已有矩形的宽高属性，不要重复新建Rect实例
  rect.set({
    // 注意默认值要写在||右侧，否则用户输入永远不会生效
    width: parseFloat(Width.value) || 300,
    height: parseFloat(Length.value) || 400
  });
  // 修改属性后重新渲染画布
  canvas.renderAll();
}

原逻辑的问题说明： #

• 缺失fabric canvas实例的初始化代码，直接使用未定义的canvas变量会触发额外报错
• 修改尺寸的函数中重复新建Rect实例，不会修改已有矩形的尺寸，还会导致画布上矩形叠加
• 宽高默认值的逻辑写反，400 || 用户输入的写法会永远取400作为默认值，用户输入不会生效
• 重复定义了fill属性，属于冗余代码可直接删除重复项

内容的提问来源于stack exchange，提问作者Mark t