JavaScript调用函数传参失败：点击表格项无法填充表单字段及语法错误解决求助

先来说你遇到的Uncaught SyntaxError: missing ) after argument list错误，根源很明确：你在生成a标签的href时，字符串类型的参数（比如item.type）没有加引号。举个例子，当item.type是'Text'时，渲染后的代码会是showFrag(14,4,Text)——这里的Text没有引号，JS会把它当成一个未定义的变量，直接导致语法报错。

接下来我们一步步修正所有问题：

1. 修复参数传递的语法错误 #

修改生成tr的innerHTML部分，给字符串类型的参数加上单引号（注意要和外层的反引号区分开）：

Object.entries(results).forEach(item => { 
  item = item[1]; 
  let child = document.createElement("tr"); 
  // 给字符串参数加上单引号，避免语法错误
  child.innerHTML = ` 
    <td>${item.number}</td> 
    <td><a href="javascript:showFrag(${item.id}, ${item.number}, '${item.type}');">${item.type}</a></td>`; 
  document.querySelector('#my-table').appendChild(child); 
}) 

这样渲染出来的链接会是showFrag(14,4,'Text')，字符串参数被正确包裹，语法错误就解决了。

2. 重构表单填充逻辑 #

你的onLoad函数存在几个问题：调用时没有传参、变量命名冲突、拼写错误，而且form标签不支持onload事件。我们直接把填充表单的逻辑放到showFrag函数里：

// 点击Type时触发的函数，负责填充表单
function showFrag(id, number, type) { 
  // 获取表单元素，用不同命名避免和参数冲突
  const idInput = document.getElementById('id'); 
  const numberInput = document.getElementById('number'); 
  const typeSelect = document.getElementById('type'); 

  // 给表单赋值
  idInput.value = id; 
  numberInput.value = number; 
  typeSelect.value = type; 
} 

// 移除原来的onLoad函数和调用，因为form没有onload事件，初始化也没有参数可传

3. 修正HTML里的无效事件 #

你的<form>标签里的onload="onLoad()"是无效的，因为form元素不存在onload事件，直接删掉这个属性即可：

<form method="post" id="save" action="javascript:myFunction()">

完整修正后的代码示例 #

JavaScript部分 #

// 假设results是你的数据对象
const results = {
  6: {type: 'Text', number: 4, id: 14},
  8: {type: 'Text', number: 2, id: 12},
  11: {type: 'Image', number: 3, id: 13},
  20: {type: 'Video youtube', number: 5, id: 15},
  21: {type: 'Title', number: 1, id: 11}
};

// 生成表格行
Object.entries(results).forEach(item => { 
  item = item[1]; 
  let child = document.createElement("tr"); 
  child.innerHTML = ` 
    <td>${item.number}</td> 
    <td><a href="javascript:showFrag(${item.id}, ${item.number}, '${item.type}');">${item.type}</a></td>`; 
  document.querySelector('#my-table').appendChild(child); 
}) 

// 填充表单的函数
function showFrag(id, number, type) { 
  const idInput = document.getElementById('id'); 
  const numberInput = document.getElementById('number'); 
  const typeSelect = document.getElementById('type'); 

  idInput.value = id; 
  numberInput.value = number; 
  typeSelect.value = type; 
} 

// myFunction暂时留空，你后续可以实现提交逻辑
function myFunction() {
  // 你的提交处理代码
}

HTML部分 #

<div class="split left"> 
  <div class="centered"> 
    <table id="my-table" width="90%"> 
      <tr> 
        <th>Number</th> 
        <th>Type</th> 
      </tr> 
    </table> 
    <br><br> 
  </div> 
</div> 
<div class="split right"> 
  <div class="centered"> 
    <br> 
    <div class="container"> 
      <form method="post" id="save" action="javascript:myFunction()"> 
        <div class="field"> 
          <label for="id">ID :</label> 
          <input type="number" id="id" name="id" /> 
        </div> 
        <div class="field"> 
          <label for="number">Number:</label> 
          <input type="number" id="number" name="number" /> 
        </div> 
        <div class="field"> 
          <label for="type">Type:</label> 
          <select name="type" id="type" form="typeform"> 
            <option value="Title">Title</option> 
            <option value="Text">Text</option> 
            <option value="Video">Video</option>
            <option value="Image">Image</option>
            <option value="Video youtube">Video youtube</option> 
          </select> 
        </div> 
        <div class="button"> 
          <button type="submit" class="full">Save modifiche</button> 
        </div> 
      </form> 
    </div> 
  </div> 
</div>

另外我给select标签补充了Image和Video youtube的选项，这样点击对应Type时，下拉框才能正确匹配选中值。

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