ボタン送信後にクエリ文字列と表示を取得するjavascript

私は、ユーザーが日付を入力できる電卓を作っていて、それ以降の経過時間を表示します。ように私はそれを持っているユーザーは、私がページの更新、中にコード化されてきた送信ボタンをクリックすると、次のようにクエリ文字列を表示した後：ボタン送信後にクエリ文字列と表示を取得するjavascript

file:///H:/dateselection/public_html/Document8.html?

注最後に疑問符を。

私の質問は、これをどのようにして値に渡してページに表示できるのですか？ここに私のコードは次のとおりです。ここで

<!DOCTYPE html> 
<html> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<Title>Elapsed Time Calculator</Title> 

<body> 
<!-- Navigation --> 
    <nav> 
     <ul class="w3-navbar w3-black"> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document1.html">Home</a></li> <!--Link to Home Page--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document2.html">NHL Teams</a></li><!--Link to Page of NHL Teams--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document3.html">AHL Teams</a></li><!--Link to Page of AHL Teams--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document4.html">WHL Teams</a></li><!--Link to Page of WHL Teams--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document5.html">G.A.A. Calculator</a></li><!--Link to Page of WHL Teams--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document6.html">Fan Survey</a></li><!--Link to Fan Survey Page--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document7.html">Web Safety</a></li><!--Link to Page about Web Safety--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document8.html">Elapsed Time</a></li><!--Link to Page That Calculates Elapsed Time Between Two Dates--> 
     </ul> 
    </nav> 
    <header> 
      <h1 style="text-align:center;">Elapsed Time Calculator</h1> 
    </header> 
    <article> 
     <form id="frmdate" onsubmit="myfunction()"> 
      <fieldset> 
      <label for="dateSelected"> 
       Select a date 
      </label> 
      <input type="date" id="dateSelected" /> 
      </fieldset> 
      <fieldset class="button"> 
      <button type="submit" id="determineDay">Calculate</button> 
      </fieldset> 

    </form> 

    </article> 

<div id="output"></div> 
<script src="tools.js"></script> 
</body> 
</html>

は私のスクリプトファイルです：

実際に

function myfunction() 
{ 
    var enteredDate = document.getElementById('dateSelected').valueAsDate; 
    var a= new Date(); 

    var elapsed_time = a- enteredDate; 
var result=elapsed_time.toString('days-hours-minutes-seconds'); 



//var result = "Day: " + elapsed_time.getDate() + "<br/>" + 
    // "Month: " + elapsed_time.getMonth() + "<br/>" + 
    // "Year: " + elapsed_time.getFullYear(); 
//document.getElementById('output').innerHTML = "Result is:<br/>" + result; 

} 


function secondsToString(result) 
{ 
    var numyears = Math.floor(result/31536000); 
    var numdays = Math.floor((result % 31536000)/86400); 
    var numhours = Math.floor(((result % 31536000) % 86400)/3600); 
    var numminutes = Math.floor((((result % 31536000) % 86400) % 3600)/60); 
    var numseconds = (((result % 31536000) % 86400) % 3600) % 60; 
    return numyears + " years " + numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds"; 

}

出典

2017-02-14 J.Doe

=リロードすることを防ぐことができますつまり、あなたのボタンから ' "送信"'タイプを削除します。次に、イベントハンドラをボタンに追加して数式を作成して表示します。 –

@MarkEスクリプトファイルの数学？ –

はい、数学ですが、 "数学をする"とは、ボタンが押されたときに何をしたいのかを意味しました。イベントの経験がない場合は、[こちら]（https://www.w3schools.com/js/js_htmldom_events.asp）から開始できます。 –

あなたはJSを使用していて、本当に何を提出されていないので、あなただけのフォームをonSubmitを無効にして作業することができます"submitボタン" onclickイベント。

function myfunction() { 
 
    var enteredDate = document.getElementById('dateSelected').valueAsDate; 
 
    var a = new Date(); 
 
    var elapsed_time = a - enteredDate; 
 
    var result = new Date(elapsed_time); 
 
    
 
    var result = "Day: " + result.getDate() + "<br/>" + 
 
       "Month: " + result.getMonth() + "<br/>" + 
 
       "Year: " + result.getFullYear(); 
 
    
 
    document.getElementById('output').innerHTML = "Result is:<br/>" + result; 
 
} 
 

 
function secondsToString(result) { 
 
    var numyears = Math.floor(result/31536000); 
 
    var numdays = Math.floor((result % 31536000)/86400); 
 
    var numhours = Math.floor(((result % 31536000) % 86400)/3600); 
 
    var numminutes = Math.floor((((result % 31536000) % 86400) % 3600)/60); 
 
    var numseconds = (((result % 31536000) % 86400) % 3600) % 60; 
 
    return numyears + " years " + numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds"; 
 
} 
 

 
var calculateButton = document.getElementById('determineDay'); 
 
calculateButton.onclick = myfunction;

<form id="frmdate" onsubmit="return false;"> 
 
    <fieldset> 
 
    <label for="dateSelected"> 
 
     Select a date 
 
    </label> 
 
    <input type="date" id="dateSelected" /> 
 
    </fieldset> 
 
    <fieldset class="button"> 
 
    <button id="determineDay">Calculate</button> 
 
    </fieldset> 
 
</form> 
 

 
<div id="output"></div>

出典

2017-02-14 20:31:49

私の神、それは動作します！ありがとうございました！クイック質問しかし、それはなぜ1900年代の日付を表示しますか？ –

@ J.Doeこれは、あなたのアルゴリズムが経過時間を処理する方法のために起こっています。明日私は解決策で自分の殻を更新します。 –

ボタン送信後にクエリ文字列と表示を取得するjavascript

答えて

関連する問題