テキストフィールドがロードされたときに自動的にJS関数を呼び出す

Question

私は、刃物台ページを持っています。この計算を単純なJS関数を使ってクライアント側で行うようにしたい。

ページ：

@foreach (var item in Model.Trainings) { 
    <tr> 
     <td> 
      <p call_function?='getWeekday(@item.Since)'></p> <!-- I want weekday to be displayed here --> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Since) 
     </td> 
    </tr> 
} 

JS機能：名または式は、このような方法がどのように命名されるか

<script> 
     function getWeekday(date) { 
      var weekdays = ({ 
       et: ["Pühapäev", "Esmaspäev", "Teisipäev", "Kolmapäev", "Neljapäev", "Reede", "Laupäev"], 
       en: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] 
      }); 

      var d = new Date(date); 
      var n = weekdays['et'][d.getDay()]; // currentCultureCode 
      return n; 
     } 
</script> 

ありますか？

Answer 1

要素がDOMで作成されるときに発生する要素レベルのイベントはありません。

代わりに、HTMLを作成して、DOMがロードされたときに関数を実行することができます。また、このように、コードをより拡張可能にするために何かを要素にdata属性にitem.Sinceプロパティから来た日付を保存することができます：

function getWeekday(date) { 
 
    var weekdays = ({ 
 
    et: ["Pühapäev", "Esmaspäev", "Teisipäev", "Kolmapäev", "Neljapäev", "Reede", "Laupäev"], 
 
    en: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] 
 
    }); 
 

 
    var d = new Date(date); 
 
    var n = weekdays['et'][d.getDay()]; // currentCultureCode 
 
    return n; 
 
} 
 

 
[].forEach.call(document.querySelectorAll('table p'), function(p) { 
 
    var date = new Date(p.dataset.since); 
 
    p.textContent = getWeekday(date); 
 
});

<table> 
 
    <tr> 
 
    <td><p data-since="2017-11-28"></p></td> 
 
    <td>2017-11-28</td> 
 
    </tr> 
 
    <tr> 
 
    <td><p data-since="2017-11-29"></p></td> 
 
    <td>2017-11-29</td> 
 
    </tr> 
 
</table>

かのjQueryには：

jQuery(function($) { 
    $('table p').text(function() { 
    var date = new Date($(this).data('since')); 
    return getWeekday(date); 
    }); 
});