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>"; 
} 

但總的來說，這是不對的在每一個循環來創建新的功能（尤其是具有相同的名稱）。