将ObservableHQ Scrubber笔记本转换为Vanilla JS遇报错求解

根因 #

该Uncaught TypeError: Cannot set properties of undefined (setting 'oninput')报错触发的核心是：Scrubber函数内部尝试绑定oninput事件的input DOM节点未被成功初始化，取值为undefined。

常见修复场景 #

• 场景1：漏写input元素初始化逻辑
  Observable的Scrubber封装了DOM创建逻辑，转写时如果跳过了input元素的实例化步骤，直接给未赋值的变量绑定事件就会触发报错。
  错误写法示例：

function Scrubber(initValue) {
  let input; // 仅声明未赋值
  // 直接绑定事件，此时input为undefined
  input.oninput = function() { // 此处触发报错
    console.log(this.value)
  }
}

修复方式：绑定事件前必须完成input元素的创建赋值

function Scrubber(initValue, opts = {}) {
  // 先完成input元素实例化
  const input = document.createElement('input')
  input.type = 'range'
  input.min = opts.min ?? 0
  input.max = opts.max ?? 100
  input.value = initValue
  // 此时input为已实例化的DOM节点，可以正常绑定事件
  input.oninput = function() {
    // 自定义事件逻辑
  }
  // 可以根据需要包一层容器返回
  const wrap = document.createElement('div')
  wrap.appendChild(input)
  return wrap
}

• 场景2：错把Scrubber返回的容器节点当成input绑定事件
  如果你的Scrubber函数返回的是外层容器而非input本身，直接给容器绑定oninput也可能触发类似逻辑报错。
  修复方式：从返回的容器中获取真实的input节点再做操作

const scrubberWrap = Scrubber(50)
const realInput = scrubberWrap.querySelector('input[type="range"]')
realInput.oninput = () => {
  console.log('当前值：', realInput.value)
}
document.body.appendChild(scrubberWrap)

补充校验逻辑 #

如果要避免类似报错，可以加一层非空判断再绑定事件：

if (input) {
  input.oninput = () => { /* 事件逻辑 */ }
}

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