Javascriptコールは、foreachステートメント内の最初の項目に対してのみ機能します

Question

私はmvcの初心者であり、eコマースウェブサイトを開発中です。 私のカートのリストには、総額を計算するために特定の数量を入力する必要があります。 私はforeach文の中でJavaスクリプト呼び出しを使用しましたが、呼び出しはカート項目リストの最初の項目に対してのみ機能します。

私は2番目またはその他の項目の「合計価格」フィールドをクリックすると、その後コントロールは最初の項目の「合計価格」フィールドに行きます。

私のスクリプトは

<script> 
    function edValueKeyPress() { 
     var i ; 
     for (i = 0; i < 5; i++) { 
      var edValue = document.getElementById("qt"); 
      var edValue1 = document.getElementById("cprice"); 
      var s = edValue.value * edValue1.value; 
      var t = document.getElementById("total"); 
      t.value = s; 

     }} 
</script> 

は、あなたが同じID名を追加する必要が

<table class="table"> 
    @foreach (var item in lscart) 
    { 
     <tr> 
      <td> 
       @{ 
        var base64 = Convert.ToBase64String(item.CImage); 
        var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
        <img src='@imgSrc' style="width:100px; height:100px;" /> 
       } 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.CProductName)</td> 
      <td>Rs.</td> 
      <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly",@id="cprice" } })</td> 

      <td> 
       <div class="col-md-6"> 

        @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty",@id="qt" } }) 
       </div> 

      </td> 
      <td> 
       <div> 
        @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total", @onclick = "edValueKeyPress()", @onkeyup = "edValueKeyPress()" } }) 

       </div> 
      </td> 

      <td><a href="#"><i class="fa fa-close"></i></a></td> 
     </tr> 
    } 

</table> 

here is the design sample

https://i.stack.imgur.com/MF9pV.png

Answer 1

//ビュー

<table class="table"> 

         @{ 
          int i = 0; 

          foreach (var item in lscart) 
          { 
           i = i + 1; 
           <tr> 
            <td> 
             @{ 
           var base64 = Convert.ToBase64String(item.CImage); 
           var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
           <img src='@imgSrc' style="width:100px; height:100px;" /> 
             } 
            </td> 
            <td>@Html.DisplayFor(modelItem => item.CProductName)</td> 
            <td>Rs.</td> 
            <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id = "cprice" + @i } })</td> 

            <td> 
             <div class="col-md-6"> 
              @*@Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @onkeyup = "sum()" } })*@ 
              @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id = "qt" + @i } }) 


             </div> 

            </td> 


            <td> 
             <div> 
              @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total" + @i, @onclick = "edValueKeyPress(" + @i + ")", @onkeyup = "edValueKeyPress(" + @i + ")" } }) 

             </div> 
            </td> 

            <td><a href="#"><i class="fa fa-close"></i></a></td> 
           </tr> 
          } 
         } 


        </table> 

のように見えます//スクリプト

<script> 
    function edValueKeyPress(i) { 


     //alert(i); 
     var edValue = document.getElementById("qt" + i); 
     var edValue1 = document.getElementById("cprice" + i); 
     var s = edValue.value * edValue1.value; 
     var t = document.getElementById("total" + i); 
     t.value = s; 






    } 
</script> 

Answer 2

私の見解である

<table class="table"> 
    @{ 
     var i = 0; // add a variable to get count 
    } 
    @foreach (var item in lscart) 
    { 
     i++; // incrementing for each iteration 
     <tr> 
      <td> 
       @{ 
        var base64 = Convert.ToBase64String(item.CImage); 
        var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
        <img src='@imgSrc' style="width:100px; height:100px;" /> 
       } 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.CProductName) 
      </td> 
      <td> 
       Rs. 
      </td> 
      <td> 
       @Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id="cprice_"+@i } }) // change id 
      </td> 
      <td> 
       <div class="col-md-6"> 
        @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id="qt_"+@i } }) // change id 
       </div> 
      </td> 
      <td> 
       <div> 
        @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total_"+@i, @onclick = "edValueKeyPress(@i)", @onkeyup = "edValueKeyPress(@i)" } }) // change id and pass value of i in onclick 
       </div> 
      </td> 
      <td> 
       <a href="#"><i class="fa fa-close"></i></a> 
      </td> 
     </tr> 
    } 
</table> 

スクリプトはこの

<script> 
    function edValueKeyPress(i) { 
     var edValue = document.getElementById("qt_"+i); 
     var edValue1 = document.getElementById("cprice_"+i); 
     var s = edValue.value * edValue1.value; 
     var t = document.getElementById("total_"+i); 
     t.value = s; 
    } 
</script>