クリックすると現在の時間を入力できるボタン

Question

私はスクリプト作成にはかなり新しいので、私と一緒に忍耐してください。私は時間をフェッチし、別のボタンが押されたときにデータベース（MySQL）に渡すことができる次のコードを持っています。

<form action="includes/data_input.inc.php" method="POST"> 
 

 
    <!-- button - Start Timer --> 
 
    <timer> 
 
\t <input id="starttime_button" name = "starttime_button" type="button" value="Start Timer" 
 
       onclick="document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})" /> 
 
\t <input type="time" id="starttime" name="starttime" value="" /> 
 
    </timer>

これはFirefoxではなく、Google Chromeで[OK]を動作します。私にこれをさせる一般的なコードはありますか？

...どちらの場合も

<form action="includes/data_input.inc.php" method="POST"> 
 

 
    <!-- button - Start Timer --> 
 
    <timer> 
 
\t <input id="starttime_button" name = "starttime_button" type="button" value="Start Timer" 
 
       onclick="getElementById('starttime').Date('i:s')" /> 
 
     <p type="time" id="starttime" name="starttime" value="" ></p> 
 
    </timer>

を、私はこのなど、多くのことを試してみましたが、それはかなり働いていない、メインフォームが続くと</form>

で終了前もって感謝します。

ブライアン。

Answer 1

私は理由にこのdidntの仕事を信じて傾けます。私の元のコードには時間が表示されるボックスが小さすぎた場合

<form action="includes/data_input.inc.php" method="POST"> 
 

 
    <!-- button - Start Timer --> 
 
    <timer> 
 
\t <input id="starttime_button" name = "starttime_button" type="button" value="Start Timer" 
 
       onclick="document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})" /> 
 
\t <input type="time" id="starttime" name="starttime" value="" /> 
 
    </timer>

そのサイズだけという... OKでした。表示ボックスを拡張するためにCSSコードを変更すると、それが最初に期待したようにすべて機能しました。私はまだ理解できませんが、それは二次的であり、なぜこれが後日問題となるのかを知るための食糧です。

このスレッドに協力いただき、ありがとうございます。私は本当にこれにあなたの時間と労力を感謝します。

Answer 2

スクリプトを属性に入れるのではなく、別のJavaScriptファイルまたはスクリプトタグの中に入れる方がはるかに優れています。あなたがこれまで持っているものまで修正するには：

<form action="includes/data_input.inc.php" method="POST"> 
 
     <!-- button - Start Timer --> 
 
    \t <timer> 
 
    \t  <input id="starttime_button" name = "starttime_button" type="button" value="Start Timer" onclick="setStartTime()" /> 
 
    \t  <input type="text" id="starttime" name="starttime" value="" /> 
 
    \t </timer> 
 
    </form> 
 

 
    <script> 
 
     function setStartTime(){ 
 
      document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}); 
 
     } 
 
    </script>

Answer 3

問題は、あなたがそれと一致していない値でinput type=timeを移入しようとしているということです。結果を通常のinput type=textに置くことができますが、値を表示しようとしているだけの場合は、最初にフォームフィールドに配置しないことをお勧めします。これは、ユーザーがこれらの値を変更できるようになり、マークアップを使用してフィールドを読み取り専用にします。

コードを現代の標準に準拠した有効なコードに分割し、出力のコンテナをinput type=timeからdivに変更した後で動作します。以下では、テキストボックスと好ましいdivの両方に結果を配置する方法を示しています。

// Get DOM references: 
 
var btn = document.getElementById("startTime_button"); 
 
var output1 = document.getElementById("output1"); 
 
var output2 = document.getElementById("output2"); 
 

 
// Set up click event handler: 
 
btn.addEventListener("click", function(){ 
 
    var result = new Date().toLocaleTimeString(navigator.language, { 
 
                 hour: '2-digit', 
 
                 minute:'2-digit', 
 
                 second:'2-digit' 
 
                }); 
 
                 
 
    output1.textContent = result; 
 
    output2.value = result; 
 
});

<!-- timer is not a valid element --> 
 
<div> 
 
    <input id="startTime_button" name = "starttime_button" type="button" value="Start Timer"> 
 
    <div id="output1"></div> <!-- If you are just outputting a value, don't use a form element --> 
 
    <input type="text" id="output2"> 
 
</div>