纯JS点击按钮填充同class输入框时videosize变量未定义如何解决

• 类选择器语法错误：使用querySelectorAll匹配类名时需要在类名前加.前缀，原代码直接写price-input和video-file-size属于标签选择器，匹配不到对应元素，会返回空的NodeList。
• 对NodeList对象错误取值：querySelectorAll返回的是包含所有匹配元素的NodeList集合，不是单个DOM元素，直接调用.value属性会返回undefined，原代码中var videosize = document.querySelectorAll("video-file-size").value;直接把videosize赋值为undefined，后续操作自然报错。
• 循环条件逻辑错误：循环终止条件写的是i < videosize.value，此时videosize已经是undefined，调用.value会抛出错误，正确应该用NodeList的length属性作为循环终止判断依据。

JS代码 #

var setpricebtn = document.getElementById("set-price-btn");

setpricebtn.addEventListener("click", () => {
  // 类选择器添加.前缀
  var priceinputs = document.querySelectorAll(".price-input");
  var videosizes = document.querySelectorAll(".video-file-size");
  // 取两个集合长度的最小值，避免索引越界
  var len = Math.min(priceinputs.length, videosizes.length);

  for (var i = 0; i < len; i++) {
    priceinputs[i].value = videosizes[i].value;
  }
});

原有CSS、HTML代码可正常使用无需修改。

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