如何优化JavaScript方法遍历HTML输入元素收集值生成HTML代码

问题排查 #

你修改后的代码存在4个核心错误：

• 选择器匹配错误：你HTML里的容器用的是class="inputBoxes"，但你用ID选择器$('#inputBoxes')匹配，根本找不到对应元素
• jQuery取值语法错误：jQuery对象获取输入框值需要调用.val()方法，直接用.value拿到的是undefined
• 循环长度设置错误：你取容器的子元素总数作为循环上限，但子元素包含标题行、按钮等无关内容，会循环到不存在的el6/dl6，拿到无效值
• 输出结构不符合要求：你没有按需求拆分出array_el、array_dl两个数组，也没有正确传入generate_html调用

修复方案 #

方案1：原生JavaScript实现（无需依赖jQuery） #

直接重写process_input函数即可，代码如下：

const generate_html = (array_el, array_dl, title_input) => {
  // 你原来的generate_html逻辑写在这里
  console.log("array_el:", array_el)
  console.log("array_dl:", array_dl)
  console.log("title:", title_input)
}

function process_input() {
  // 先取标题输入值
  const title_input = document.getElementById("title_input").value
  const array_el = []
  const array_dl = []
  // 循环到元素不存在就终止，不需要硬编码上限
  let i = 1
  while(true) {
    const el = document.getElementById(`el${i}`)
    const dl = document.getElementById(`dl${i}`)
    if(!el || !dl) break
    array_el.push(el.value)
    array_dl.push(dl.value)
    i++
  }
  // 按需求传参调用
  generate_html(array_el, array_dl, title_input)
  
  // 如果你需要原来的answer拼接逻辑，按你的排序写就行：
  const answer = `${array_el[3]}: ${array_dl[3]}\n${array_el[4]}: ${array_dl[4]}\n${array_el[0]}: ${array_dl[0]}\n${array_el[1]}: ${array_dl[1]}\n${array_el[2]}: ${array_dl[2]}`
  // 渲染到textarea的话直接给textarea的value赋值即可，示例：
  // document.getElementById('result_textarea').value = answer
}

方案2：jQuery实现（如果你项目已引入jQuery） #

const generate_html = (array_el, array_dl, title_input) => {
  console.log("array_el:", array_el)
  console.log("array_dl:", array_dl)
  console.log("title:", title_input)
}

function process_input() {
  const title_input = $("#title_input").val()
  const array_el = []
  const array_dl = []
  let i = 1
  while(true) {
    const el = $(`#el${i}`)
    const dl = $(`#dl${i}`)
    if(el.length === 0 || dl.length === 0) break
    array_el.push(el.val())
    array_dl.push(dl.val())
    i++
  }
  generate_html(array_el, array_dl, title_input)
}

该实现不需要硬编码元素数量，后续你新增el6/dl6也会自动被收集，不需要修改JS代码。

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