HTML和JS基礎知識，點擊提交按鈕后填寫表單

Question

我想計算光在真空中行進給定公里數所需的時間。 我有帶有一些輸入和提交按鈕的表單，我希望在 JS 腳本中計算時間並在單擊提交按鈕后在表單的結果 [min] 和結果 [h] 字段中顯示結果，但它不起作用. 這里有什么問題？

這是我的表格：

<div class="text-justify index_text_style">
    <p>This is a calculator that allows you to calculate the time it takes light to travel a given number of kilometers in a vacuum.</p>
</div>
<form class="light_forms">
    <label class="index_text_style" for="km_count">Enter number</label>
    <input type="number" id="km_count" name="km_count">
         <label class="index_text_style" for="km_count">[km]</label>
         <br> <br>

         <label class="index_text_style" for="result_min">Result: </label>
         <input type="text" id="result_min" name="result_min" disabled>
         <label class="index_text_style" for="result_min">[min] </label>
         <br> <br>

         <label class="index_text_style" for="result_h">Result: </label>
         <input type="text" id="result_h" name="result_h" disabled>
         <label class="index_text_style" for="result_h">[h] </label>
         <br> <br>

         <input type="submit" value="Submit" onclick="results()"> <input type="reset" value="Reset">
</form>

我的腳本放在正文結束標簽之前：

            <script>

                function results(){
                var km_count = document.getElementByID("km_count").value;
                var result_1 = km_count / 300 000 / 60;
                var result_2 = km_count / 300 000 / 3600;

                document.getElementById("result_min").innerHTML = result_1;
                document.getElementById("result_h").innerHTML = result_2;
                }
            </script>

Answer 1

您使用的是“提交”按鈕，每次單擊/提交都會重新加載頁面，在您的情況下，您需要防止默認行為（ https://developer.mozilla.org/en-US/docs/Web/API/Event /防止默認）

此外，我建議您使用 addEventlistner ( https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener )

這是您的代碼的快速修復：

<form class="light_forms" onsubmit="return results(event)">
    <label class="index_text_style" for="km_count">Enter number</label>
    <input type="number" id="km_count" name="km_count">
     <label class="index_text_style" for="km_count">[km]</label>
     <br> <br>

     <label class="index_text_style" for="result_min">Result: </label>
     <input type="text" id="result_min" name="result_min" disabled>
     <label class="index_text_style" for="result_min">[min] </label>
     <br> <br>

     <label class="index_text_style" for="result_h">Result: </label>
     <input type="text" id="result_h" name="result_h" disabled>
     <label class="index_text_style" for="result_h">[h] </label>
     <br> <br>

     <input type="submit" value="Submit"> <input type="reset" value="Reset">
</form>

<script>

    function results(event){
       event.preventDefault();
        var km_count = document.getElementById("km_count").value;
        var result_1 = km_count / 300000 / 60;
        var result_2 = km_count / 300000 / 3600;

        document.getElementById("result_min").value  = result_1;
        document.getElementById("result_h").value  = result_2;
    }
</script>

Answer 2

您的代碼中存在以下問題：

• 使用document.getElementByID而不是document.getElementById （打字錯誤）
• 在提交按鈕上使用click事件處理程序而不是表單上的submit事件（更合適）
• 不在您的事件處理程序中使用event.preventDefault() ，這樣瀏覽器就不會傳播該事件，也不會履行它在游戲中實際執行新的 http 請求的部分
• 您正在使用.innerHTML設置輸入內容，而不是像您已經對輸入所做的那樣在這種情況下使用更合適的.value

除此之外，正如其他一些評論已經建議的那樣，使用 .addEventListener 添加事件處理程序而不是處理.addEventListener上的on eventname屬性在另一個 realm 中進行綁定會更合適。

在下面的這個代碼片段中，我還保留了在單獨的 function getTimeSpent(km, speed)中計算行進距離的邏輯，這將是通用的，相對於現在需要從調用者傳遞的速度。

由於速度參數被泛化了，我將它放在距離（公里）輸入元素的data-speed屬性中。 無論如何，如果不設置，將使用lightspeed值（在全局范圍內單獨定義為常量）。

調用者只是一個事件處理程序，它知道用於輸入的 html 元素和用於計算行進距離的 output 和 function 元素。

計算距離的數學被更好地分解以避免多次重復相同的操作。

 document.querySelector('form.light_forms').addEventListener('submit', event => { const inputKM = document.getElementById("km_count"); const distanceKM = parseFloat(inputKM.value); //the speed gets fetched from the data-speed attribute if it's present, //otherwise it's the constant lightspeed set in the higher scope const speedKMperS = (inputKM.hasAttribute("data-speed"))? parseFloat(inputKM.dataset.speed): lightspeed; const time = getTimeSpent(distanceKM, speedKMperS); document.getElementById("result_min").value = time.minutes; document.getElementById("result_h").value = time.hours; event.preventDefault(); }); const lightspeed = 300000; function getTimeSpent(km, speed) { const seconds = km / speed; const minutes = seconds / 60; const hours = minutes / 60; return { hours: hours, minutes: minutes, seconds: seconds }; }

 <div class="text-justify index_text_style"> <p>This is a calculator that allows you to calculate the time it takes light to travel a given number of kilometers in a vacuum.</p> </div> <form class="light_forms"> <label class="index_text_style" for="km_count">Enter number</label> <input type="number" id="km_count" name="km_count" data-speed="300000"> <label class="index_text_style" for="km_count">[km]</label> <br><br> <label class="index_text_style" for="result_min">Result: </label> <input type="text" id="result_min" name="result_min" disabled> <label class="index_text_style" for="result_min">[min] </label> <br><br> <label class="index_text_style" for="result_h">Result: </label> <input type="text" id="result_h" name="result_h" disabled> <label class="index_text_style" for="result_h">[h] </label> <br><br> <input type="submit" value="Submit" onsubmit="results()"> <input type="reset" value="Reset"> </form>