如何将字符串转为HTMLElement解决canvas gauge批量初始化报错问题

问题根因 #

BaseGauge.fromElement方法要求入参为HTMLElement类型的DOM对象，你原有代码中传入的是$(this).attr('id')返回的ID字符串，参数类型不匹配导致报错。

修复方案 #

1. 基于现有jQuery写法修改

jQuery的each回调函数第二个参数本身就是匹配到的原生DOM元素，直接传入即可：

$('.canv').each(function(i, domElement) {
  BaseGauge.fromElement(domElement);
});

也可以手动把jQuery对象转为原生DOM对象：

$('.canv').each(function() {
  BaseGauge.fromElement($(this)[0]);
});

2. 原生JS实现（无需依赖jQuery）

如果不需要额外依赖jQuery，可以用原生选择器实现相同效果：

document.querySelectorAll('.canv').forEach(domElement => {
  BaseGauge.fromElement(domElement);
});

补充说明 #

你之前单独调用BaseGauge.fromElement(canv0)可以成功，是因为现代浏览器会默认将页面中带id属性的元素挂载到window全局对象下，此时canv0指向的就是id为canv0的原生DOM元素，和上述代码中传入的domElement类型一致，符合方法入参要求。

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