堆棧內存溢出
  簡體   English   中英

JavaScript表格無法正常工作/無法根據公式計算結果

[英]Javascript form not working/not calculating result from a formula

 原文  2016-06-05 18:39:31  6   3    javascript/ html/ forms

問題描述

我正在嘗試制作一個JavaScript表格，該表格將根據飼料類型，一天要喂的飼料次數，目標蛋白質攝入量，當前蛋白質攝入量和患者體重來計算喂養量。

表單用HTML術語顯示的很好，但是腳本無法運行，因為它無法計算。 我嘗試使用chrome進行調試，但沒有收到任何錯誤。

這是我的腳本： 

var theForm = document.forms["proteinvolume"];



 var Formula = new Array();
    Formula["0.016"] = 0.016;
    Formula["0.009"] = 0.009;
    Formula["0.017"] = 0.017;
    Formula["0.024"] = 0.024;
    Formula["0.035"] = 0.035;
    Formula["0.0145"] = 0.0145;
    Formula["0.019"] = 0.019;
    Formula["0.026"] = 0.026;
    Formula["0.0145"] = 0.0145;
    Formula["0.02"] = 0.02;
Formula["0.0255"] = 0.0255;
Formula["0.0142"] = 0.0142;
Formula["0.0181"] = 0.0181;
Formula["0.0195"] = 0.0195;
Formula["0.0216"] = 0.0216;
Formula["0.0268"] = 0.0268;
Formula["0.028"] = 0.028;
function getFormulaType() {
    var formulatype = 0;

    var theForm = document.forms["proteinvolume"];

    var selectedFormula = theForm.elements["Formula"];


    formulatype = Formula[selectedFormula.value];


    return formulatype;
}
var Times = new Array();
Times["6"] = 6;
Times["7"] = 7;
Times["8"] = 8;
function getFeedTimes() {
    var Feedtimes = 0;


    var theForm = document.forms["proteinvolume"];

    var Selectedtimes = theForm.elements["feedtimes"];


    Selectedtimes = Formula[Feedtimes.value];


    return Selectedtimes;
}
var targetintake = new Array();
targetintake["3.5"] = 3.5;
targetintake["4"] = 4;
targetintake["4.5"] = 4.5;

function getTarget() {
    var target = 0;


    var theForm = document.forms["proteinvolume"];

    var selectedTarget = theForm.elements["targetintake"];


    target = Formula[selectedTarget.value];


    return target;

}
function getWeight() {

    var theForm = document.forms["proteinvolume"];

    var Weight = theForm.elements["Weight"];
    var weight = 0;

    if (Weight.value != "") {
        weight = parseFloat(Weight.value);
    }
    return weight;
}
function getVolume() {

    var theForm = document.forms["proteinvolume"];

    var Volume = theForm.elements["Volume"];
    var volume = 0;

    if (Volume.value != "") {
        Volume = parseFloat(Volume.value);
    }
    return volume;
}
function getProtein() {
    var E = 6 * getTarget();
    var D = 6000 * getFormulaType() * getVolume();
    var F = E - D;
    var Total = F / getFeedTimes();

    //display the result
    document.getElementById('feed').innerHTML =
                              Total


}

這是我的HTML： 

<!DOCTYPE html>
<html>
<head>

    <script> 
//the script posted above

</script>
</head>
<body>
    <form action="" id="proteinvolume">

        <p> Formula Type</p>
        <select id ="Formula"name="Formula" onchange="">
            <option value="0.016"> PreTerm Plain BM</option>
            <option value= "0.009">Term Plain BM </option>
            <option value="0.017">Term BM +Similac HiProtein HMF 22 cal/oz </option>
            <option value="0.024">Term BM+Similac HiProtein HMF 24 cal/oz </option>
            <option value="0.035">Term BM+Similac HiProtein HMF 26 cal/oz </option>
            <option value="0.0145">Term BM+Similac  HMF 22 cal/oz </option>
            <option value="0.019">Term BM+Similac HMF 24 cal/oz </option>
            <option value="0.026">Term BM+Similac HMF 26 cal/oz</option>
            <option value="0.0145">Term BM+Enfamil HMF 22 cal/oz </option>
            <option value="0.02">Term BM+Enfamil HMF 24 cal/oz </option>
            <option value="0.0255">Term BM+Enfamil HMF 26 cal/oz </option>
            <option value="0.0142">Term BM+SimilacSpecialCare 22  </option>
            <option value="0.0181">Term BM+SimilacSpecialCare  24 cal/oz </option>
            <option value="0.0195">Term BM+SimilacSpecialCare 25 cal/oz </option>
            <option value="0.0216">Term BM+Similac Special Care 26 cal/oz </option>
            <option value="0.0268">SimilacSpecialCare HiProtein 24 cal/oz </option>
            <option value="0.028">SimilacSpecialCare HiProtein 27 cal/oz (1:1 SSC30:24) </option>
        </select>

        <br />


        <p>Number of feedings per day</p>
        <select id="feedtimes"name="feedtimes" onchange="">
            <option value= "6">6 </option>
            <option value="7">7 </option>
            <option value="8">8</option>
        </select>
        <p>Target Protein Intake</p>
        <select id="targetintake"name="targetintake" onchange="">
            <option value="3.5">3.5 </option>
            <option value="4">4 </option>
            <option value="4.5">4.5</option>
        </select>
        <br />
        <p>Patient Weight (grams)</p>
        <input type="text" id="Weight" name="Weight">
        <br />
        <p>Current Feeding Volume (mL)</p>
        <input type="text" id="Volume" name="Volume" onchange="getProtein();">
        <br />

        <button type="button" onsubmit="getProtein()">Calculate</button>
        Protein Volume per feed (mL):<INPUT type="text" id="feed" Size=8>



     </form>


</body>
</html>

如果有人可以幫助我找到錯誤，或者可以指導我如何解決錯誤，這將有很多意義。 謝謝！

3 個解決方案

解決方案1
 1  2016-06-05 19:20:16

要添加其他人已經擁有的內容，應該只在文檔完全加載后才運行腳本。 

<body onload="runCalculations()">

只需將所有腳本代碼放入 

function runCalculations() {}

以便在文檔加載后運行。

解決方案2
 0  2016-06-05 19:16:04

這里確實有很多錯誤。

首先，做document.getElementById('whatever')更容易/更好/更跨平台； 我在Chrome瀏覽器中嘗試了語法，但是找不到表單元素。

其次，您的getFeedTimes試圖從Formula對象而不是您創建的Times對象中獲取值。 並使用未定義的Feedtimes.value。

第三，永遠不會調用getWeight。 不確定應該放在哪里。

第四，當您要表示音量時，您具有音量。 JavaScript區分大小寫。

我在這里有有效的代碼（盡管我不知道該公式是否正確，但是它確實可以滿足您的要求）。 

 <!DOCTYPE html> <html> <head> <script> var theForm = document.forms["proteinvolume"]; var Formula = new Array(); Formula["0.016"] = 0.016; Formula["0.009"] = 0.009; Formula["0.017"] = 0.017; Formula["0.024"] = 0.024; Formula["0.035"] = 0.035; Formula["0.0145"] = 0.0145; Formula["0.019"] = 0.019; Formula["0.026"] = 0.026; Formula["0.0145"] = 0.0145; Formula["0.02"] = 0.02; Formula["0.0255"] = 0.0255; Formula["0.0142"] = 0.0142; Formula["0.0181"] = 0.0181; Formula["0.0195"] = 0.0195; Formula["0.0216"] = 0.0216; Formula["0.0268"] = 0.0268; Formula["0.028"] = 0.028; function getFormulaType() { var formulatype = 0; var selectedFormula = document.getElementById("Formula"); formulatype = Formula[selectedFormula.value]; return formulatype; } var Times = new Array(); Times["6"] = 6; Times["7"] = 7; Times["8"] = 8; function getFeedTimes() { var Feedtimes = 0; var Feedtimes = document.getElementById("feedtimes"); Selectedtimes = Times[Feedtimes.value]; return Selectedtimes; } var targetintake = new Array(); targetintake["3.5"] = 3.5; targetintake["4"] = 4; targetintake["4.5"] = 4.5; function getTarget() { var target = 0; var selectedTarget = document.getElementById("targetintake"); target = targetintake[selectedTarget.value]; return target; } function getWeight() { var Weight = document.getElementById("Weight"); var weight = 0; if (Weight.value != "") { weight = parseFloat(Weight.value); } return weight; } function getVolume() { var Volume = document.getElementById("Volume"); var volume = 0; if (Volume.value != "") { volume = parseFloat(Volume.value); } return volume; } function getProtein() { var E = 6 * getTarget(); var D = 6000 * getFormulaType() * getVolume(); var F = E - D; var Total = F / getFeedTimes(); //display the result document.getElementById('feed').value = Total } </script> </head> <body> <form action="" id="proteinvolume"> <p> Formula Type</p> <select id ="Formula" name="Formula" onchange=""> <option value="0.016"> PreTerm Plain BM</option> <option value= "0.009">Term Plain BM </option> <option value="0.017">Term BM +Similac HiProtein HMF 22 cal/oz </option> <option value="0.024">Term BM+Similac HiProtein HMF 24 cal/oz </option> <option value="0.035">Term BM+Similac HiProtein HMF 26 cal/oz </option> <option value="0.0145">Term BM+Similac HMF 22 cal/oz </option> <option value="0.019">Term BM+Similac HMF 24 cal/oz </option> <option value="0.026">Term BM+Similac HMF 26 cal/oz</option> <option value="0.0145">Term BM+Enfamil HMF 22 cal/oz </option> <option value="0.02">Term BM+Enfamil HMF 24 cal/oz </option> <option value="0.0255">Term BM+Enfamil HMF 26 cal/oz </option> <option value="0.0142">Term BM+SimilacSpecialCare 22 </option> <option value="0.0181">Term BM+SimilacSpecialCare 24 cal/oz </option> <option value="0.0195">Term BM+SimilacSpecialCare 25 cal/oz </option> <option value="0.0216">Term BM+Similac Special Care 26 cal/oz </option> <option value="0.0268">SimilacSpecialCare HiProtein 24 cal/oz </option> <option value="0.028">SimilacSpecialCare HiProtein 27 cal/oz (1:1 SSC30:24) </option> </select> <br /> <p>Number of feedings per day</p> <select id="feedtimes" name="feedtimes" onchange=""> <option value= "6">6 </option> <option value="7">7 </option> <option value="8">8</option> </select> <p>Target Protein Intake</p> <select id="targetintake" name="targetintake" onchange=""> <option value="3.5">3.5 </option> <option value="4">4 </option> <option value="4.5">4.5</option> </select> <br /> <p>Patient Weight (grams)</p> <input type="text" id="patientWeight" name="Weight"> <br /> <p>Current Feeding Volume (mL)</p> <input type="text" id="Volume" name="Volume" onchange="getProtein();"> <br /> <button type="button" onclick="getProtein()">Calculate</button> Protein Volume per feed (mL):<INPUT type="text" id="feed" Size=8> </form> </body> </html>

解決方案3
 0  2016-06-05 19:17:02

您至少有一個主要問題-我將把您的代碼轉換成一個片段，看看它是否可以運行。

您在您的head元素中有腳本，並且該腳本在頁面開始加載后立即運行。 

var theForm = document.forms["proteinvolume"];

將為null因為尚未出現任何表格。 您的代碼應該在</body>標記之前。

調試的第一步應該始終是檢查JavaScript錯誤控制台。 如果沒有錯誤，請使用調試器開始遍歷代碼，並確保值確實是您所期望的。

另外，你在做 

<button type="button" onsubmit="getProtein()">Calculate</button>

按鈕沒有onsubmit屬性，表單沒有。 將其移動到表單或將其更改為onclick 。

這足以使您進一步調試。

哦，請注意：您並不是在代碼中真正使用數組： 

var Formula = new Array();

應該

var Formula = {}; //一個空對象。

為了獲得數組的神奇效果，您必須使用整數鍵。 您擁有的sorta-sorta之所以有用，是因為數組確實從object繼承而來，因此可以像對象一樣使用。 直到您將它們像數組一樣對待為止，這才“起作用”。 ;） 

 var theForm = document.forms["proteinvolume"]; var Formula = new Array(); Formula["0.016"] = 0.016; Formula["0.009"] = 0.009; Formula["0.017"] = 0.017; Formula["0.024"] = 0.024; Formula["0.035"] = 0.035; Formula["0.0145"] = 0.0145; Formula["0.019"] = 0.019; Formula["0.026"] = 0.026; Formula["0.0145"] = 0.0145; Formula["0.02"] = 0.02; Formula["0.0255"] = 0.0255; Formula["0.0142"] = 0.0142; Formula["0.0181"] = 0.0181; Formula["0.0195"] = 0.0195; Formula["0.0216"] = 0.0216; Formula["0.0268"] = 0.0268; Formula["0.028"] = 0.028; function getFormulaType() { var formulatype = 0; var theForm = document.forms["proteinvolume"]; var selectedFormula = theForm.elements["Formula"]; formulatype = Formula[selectedFormula.value]; return formulatype; } var Times = new Array(); Times["6"] = 6; Times["7"] = 7; Times["8"] = 8; function getFeedTimes() { var Feedtimes = 0; var theForm = document.forms["proteinvolume"]; var Selectedtimes = theForm.elements["feedtimes"]; Selectedtimes = Formula[Feedtimes.value]; return Selectedtimes; } var targetintake = new Array(); targetintake["3.5"] = 3.5; targetintake["4"] = 4; targetintake["4.5"] = 4.5; function getTarget() { var target = 0; var theForm = document.forms["proteinvolume"]; var selectedTarget = theForm.elements["targetintake"]; target = Formula[selectedTarget.value]; return target; } function getWeight() { var theForm = document.forms["proteinvolume"]; var Weight = theForm.elements["Weight"]; var weight = 0; if (Weight.value != "") { weight = parseFloat(Weight.value); } return weight; } function getVolume() { var theForm = document.forms["proteinvolume"]; var Volume = theForm.elements["Volume"]; var volume = 0; if (Volume.value != "") { Volume = parseFloat(Volume.value); } return volume; } function getProtein() { var E = 6 * getTarget(); var D = 6000 * getFormulaType() * getVolume(); var F = E - D; var Total = F / getFeedTimes(); //display the result document.getElementById('feed').innerHTML = Total } 
 <form action="" id="proteinvolume"> <p>Formula Type</p> <select id="Formula" name="Formula" onchange=""> <option value="0.016">PreTerm Plain BM</option> <option value="0.009">Term Plain BM</option> <option value="0.017">Term BM +Similac HiProtein HMF 22 cal/oz</option> <option value="0.024">Term BM+Similac HiProtein HMF 24 cal/oz</option> <option value="0.035">Term BM+Similac HiProtein HMF 26 cal/oz</option> <option value="0.0145">Term BM+Similac HMF 22 cal/oz</option> <option value="0.019">Term BM+Similac HMF 24 cal/oz</option> <option value="0.026">Term BM+Similac HMF 26 cal/oz</option> <option value="0.0145">Term BM+Enfamil HMF 22 cal/oz</option> <option value="0.02">Term BM+Enfamil HMF 24 cal/oz</option> <option value="0.0255">Term BM+Enfamil HMF 26 cal/oz</option> <option value="0.0142">Term BM+SimilacSpecialCare 22</option> <option value="0.0181">Term BM+SimilacSpecialCare 24 cal/oz</option> <option value="0.0195">Term BM+SimilacSpecialCare 25 cal/oz</option> <option value="0.0216">Term BM+Similac Special Care 26 cal/oz</option> <option value="0.0268">SimilacSpecialCare HiProtein 24 cal/oz</option> <option value="0.028">SimilacSpecialCare HiProtein 27 cal/oz (1:1 SSC30:24)</option> </select> <br /> <p>Number of feedings per day</p> <select id="feedtimes" name="feedtimes" onchange=""> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> <p>Target Protein Intake</p> <select id="targetintake" name="targetintake" onchange=""> <option value="3.5">3.5</option> <option value="4">4</option> <option value="4.5">4.5</option> </select> <br /> <p>Patient Weight (grams)</p> <input type="text" id="Weight" name="Weight"> <br /> <p>Current Feeding Volume (mL)</p> <input type="text" id="Volume" name="Volume" onchange="getProtein();"> <br /> <button type="button" onclick="getProtein()">Calculate</button> Protein Volume per feed (mL): <INPUT type="text" id="feed" Size=8> </form>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript計算公式 公式無法在JavaScript中正確計算 excel和javascript的結果公式不同 JavaScript Math公式結果 表單的JavaScript彈出結果 在表單中使用JavaScript計算，輸出到動態字段，代碼不起作用 計算HTML / Javascript形式 用於計算的JavaScript函數不起作用？ Javascript：計算余數不起作用？ javascript中計算結果數為NaN
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM