ジャバスクリプト：JavaScriptのfunciton

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

しかし、一般的に、それはすべてのループで（特に同じ名前の）新しい関数を作成する権利はありません。

シンプルなソリューションです。