Java脚本：使用JavaScript错误显示功能可按

Question

更新：

所以现在我改变了我的代码如下：

<script> 
     function myFunction(calid) { 
      document.getElementById(calid).innerHTML = "<ul><li>" + calid + "</li>" + "</ul>"; 
     } 
     </script> 

     {% for calibrations in equipment.calibration_set.all %} 


     <ul> 
      <li> 
       <p onclick="myFunction({{calibrations.id}}) "> {{calibrations.cal_date}} </p> 
       <div id = {{calibrations.id}}> YES </div> 


      </li> 
     </ul> 

     {% endfor %} 

，它工作正常。谢谢！

但是接下来还有一个奇怪的问题：当我试图向函数添加更多参数以便它可以显示其他信息时，它会停止工作，这真的很奇怪，因为只有我更改的是添加新参数。所以如果我试试这个：

<script> 
     function myFunction(calid, calby) { 
      document.getElementById(calid).innerHTML = "<ul><li>" + calid + "</li>" + "<li>" + calby + "</li>" + "</ul>"; 
     } 
     </script> 

     {% for calibrations in equipment.calibration_set.all %} 


     <ul> 
      <li> 
       <p onclick="myFunction({{calibrations.id}}, {{calibrations.cal_by}}) "> {{calibrations.cal_date}} </p> 
       <div id = {{calibrations.id}}> YES </div> 


      </li> 
     </ul> 

     {% endfor %} 

然后当我点击日期，没有任何反应。

1. 这是怎么回事？
2. 也许我应该使用JSON将模型数据传递到JavaScript？

旧后： 我只是将我倾倒在这里的代码第一：

{% for calibrations in equipment.calibration_set.all %} 
     <script> 
     function myFunction(cal_id) { 
      document.getElementById(cal_id).innerHTML = "<ul><li>{{calibrations.id}}</li></ul>"; 
     } 
     </script> 
     <ul> 
      <li> 
       <p onclick="myFunction({{calibrations.id}})">{{calibrations.cal_date}}</p> 
       <div id = {{calibrations.id}}> YES </div> 


      </li> 
     </ul> 

所以校准设备的外键。在这里，我想 显示与设备关联的校准列表，并使用 校准日期作为javascript onclick事件，以便用户可以点击以显示此校准的详细信息。我所拥有的 问题是，现在即使有多个校准，点击校准日期的 也会将其下的“是”更改为最新校准的ID 。

[！[在这里输入的形象描述] [1] [1]

像图片，我点击了第一和第二校准日期 ，并期望它下面的文字分别为1和2。

有人可以指出这里有什么问题吗？

[1]：http://i.stack.imgur.com/kRFkl.png

Answer 1

您正在创建在每一个循环同名的JavaScript功能。这就是为什么所有的点击都返回相同的结果。

简单的解决方案是：

function myFunction(cal_id) { 
    document.getElementById(cal_id).innerHTML = "<ul><li>" + cal_id + "</li></ul>"; 
} 

但总的来说，这是不对的在每一个循环来创建新的功能（尤其是具有相同的名称）。