Chrome控制台JS填充输入框：字典重构遇空类型错误求助

原本用多if判断的脚本可根据页面h3标题更新对应输入框内容，改用字典重构后触发以下错误：

Uncaught TypeError: Cannot set properties of null (setting 'value')

原正常运行代码 #

var k = 1;
for (var i = 2; i < 29; i++) {
    var j = i-k;
    if(document.querySelector('h3:nth-child('+i+')'))
    {
        var value = document.querySelector('h3:nth-child('+i+')').innerHTML;
        if( value.includes("Value1"))
        {
            document.querySelector('#q'+j).value = "random_value1";
        }
        else if( value.includes("Value2"))
        {
            document.querySelector('#q'+j).value = "random_value2";
        }
        else if( value.includes("Value3"))
        {
            document.querySelector('#q'+j).value = "random_value3";
        }           
        else
        {
            // do nothing
        }
        k = k+1;
    }
}

重构后的报错代码及HTML示例 #

JavaScript代码

const myself = {
  Value1: "random_value1",
  Value2: "random_value2",
  Value3: "random_value3"
};

var k = 1;

for (var key in myself) {
  console.log(key)
  console.log(myself[key])
  for (var i = 2; i < 29; i++) {
    var j = i - k;
    if (document.querySelector('h3:nth-child(' + i + ')')) {
      var value = document.querySelector('h3:nth-child(' + i + ')').innerHTML;
      if (value.includes(key)) {
        console.log("true")
        document.querySelector('#q' + j).value = myself[key];
      } else {
        // do nothing
      }
      k = k + 1;
    }
  }
}

HTML代码

<div class="html_form">&nbsp;<br>
  <h3>Value1:</h3>
  <input type="text" name="q1" id="q1">
  <h3>Value2:</h3>
  <input type="text" name="q2" id="q2">
</div>

重构后的代码逻辑完全颠倒：原代码是遍历可能的h3位置，找到存在的h3后匹配关键词，对应更新输入框，且k只在找到h3时累加一次，保证j对应正确的输入框id（q1、q2...）。

而重构后的代码是外层遍历字典的每个key，内层再重复遍历h3位置，这会导致k被多次累加，很快j的计算结果会超出页面中存在的输入框id范围（比如页面只有q1、q2，但j会变成3、4...），此时document.querySelector('#q' + j)返回null，给null赋值value就触发了报错。

调整逻辑，回到原代码的遍历顺序：先找到所有h3元素，再逐个匹配字典中的key，更新对应输入框。同时优化DOM查询次数，避免重复调用querySelector：

const valueMap = {
  Value1: "random_value1",
  Value2: "random_value2",
  Value3: "random_value3"
};

// 获取所有h3元素，避免硬编码遍历范围
const h3Elements = document.querySelectorAll('.html_form h3');
h3Elements.forEach((h3, index) => {
  const h3Text = h3.innerHTML;
  // 遍历字典找匹配的key
  for (const key in valueMap) {
    if (h3Text.includes(key)) {
      // 输入框id是q1、q2...对应index+1
      const input = document.querySelector(`#q${index + 1}`);
      if (input) { // 额外判断输入框是否存在，避免报错
        input.value = valueMap[key];
      }
      break; // 找到匹配key后跳出循环，避免重复检查
    }
  }
});

对应HTML（不变）

<div class="html_form">&nbsp;<br>
  <h3>Value1:</h3>
  <input type="text" name="q1" id="q1">
  <h3>Value2:</h3>
  <input type="text" name="q2" id="q2">
</div>

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