根據具體的值打印留言

我在爲大學工作的項目遇到問題。它包括使用html表單和javascript創建糖尿病風險評估工具。根據具體的值打印留言

基本上有4個問題，每個問題有4個可能的答案（使用單選按鈕，用戶每個問題只能選擇一個答案）。最後，會出現一個「計算」按鈕，它將計算所選答案的值，對這些值進行求和並根據結果顯示一條消息。下面是HTML和JavaScript代碼：

let calc = document.getElementById('form'); 
 

 
calc.addEventListener('submit', calculateAndPrintRisk); 
 

 
function calculateRisk() { 
 
    let age = document.querySelector('input[name="age"]:checked').value; 
 
    let bmi = document.querySelector('input[name="bmi"]:checked').value; 
 
    let diabetes = document.querySelector('input[name="diabetes"]:checked').value; 
 
    let diet = document.querySelector('input[name="diet"]:checked').value; 
 
    return age + bmi + diabetes + diet; 
 
}; 
 

 
function calculateAndPrintRisk(e) { 
 
    e.preventDefault(); 
 
    var risk; 
 
    var riskTotal = calculateRisk(); 
 

 
    if (riskTotal) { 
 
    if (riskTotal <= 15) { 
 
     alert("risk is low"); 
 
    } else if (riskTotal <= 25) { 
 
     alert(risk = "medium"); 
 

 
    } else { 
 
     alert(risk = "high"); 
 
    } 
 

 

 
    } 
 
}

<!DOCTYPE HTML> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>JavaScript FMA</title> 
 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    
 
    </head> 
 
    <script src="diabetestool.js"> </script> 
 
    <body> 
 

 
<div id="wrapper"> 
 

 
    <h1>The Diabetes Risk Assesment Tool</h1> 
 
    <div id="Options"> 
 
    <form id="form"> 
 
     <p> How old are you? </p> 
 
     1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10"> 
 

 
     <p> What is your BMI? </p> 
 

 
     0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10"> 
 

 
     <p> Does anybody in your family have diabetes? </p> 
 

 
     No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15"> 
 

 

 
     <p> How would you describe your diet? </p> 
 

 
     Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10"> 
 

 

 
     <input type="submit" id="calculate" name="button_calculate" value="Calculate"> 
 
    </form> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

的代碼顯示沒有錯誤，但是當我打計算不起作用。

任何幫助都會大大降低，因爲我仍在學習javaScript。

來源

2017-08-05 Miguel

你在哪裏檢查錯誤？..它必須被拋出一些 –

先前編輯固定錯字 – mplungjan

您需要'的window.onload =函數（）{document.querySelector （「形成」）。onsubmit = function（）{calculateAndPrintRisk（）; return false; }' - 不要將事件處理程序附加到提交按鈕。使它成爲一個按鈕或附加到表單提交事件，並取消事件 – mplungjan

繼2條語句必須拋出錯誤 -

alert("risk is low"; 

alert(risk = "high";

命中F12，而你在任何瀏覽器中執行代碼。在其中尋找控制檯。您必須在那裏看到錯誤。

來源

2017-08-05 17:36:53

你是正確的拉傑夫。我沒有看到那些丟失的括號。感謝那 – Miguel

你不打電話給你的功能，當您提交表單

您需要添加和事件監聽檢測，當您提交您的文章，則取消該事件，請致電calcultateRisk功能

你應該事件是這樣的。

document.getElementById('form1').addEventListener('submit', function(evt){ 
    evt.preventDefault(); 
    // do what you want 
    // call your function 
})

來源

2017-08-05 17:36:59 sheplu

任何機會，你可以指導我在這個eventListener？我應該在鏈接到type =「submit」輸入的Javascript文件中創建一個eventListener嗎？ – Miguel

剛剛通過示例編輯了我的帖子。如果你看看谷歌'Javscript事件'，你會發現很多東西 – sheplu

@Miguel永遠不要附加任何東西到提交按鈕。使它成爲一個按鈕或附加到表單提交事件 – mplungjan

有幾個錯別字，一個不必要的形式（如您不想提交的東西）和輸入值通常是字符串，它是通過+運算符連接起來。您可能希望得到所有檢查的：

[...document.querySelectorAll('input:checked')]

，並減少他們自己的加和值：

.reduce((sum,el)=>sum+parseInt(el.value),0);

function calculateRisk() { 
 
    return [...document.querySelectorAll('input:checked')].reduce((sum, el) => sum + parseInt(el.value), 0); 
 
} 
 

 
function calculateAndPrintRisk() { 
 
    var riskTotal = calculateRisk(); 
 

 
    if (riskTotal <= 15) { 
 
    alert("risk is low"); 
 
    } else if (riskTotal <= 25) { 
 
    alert("risk is medium"); 
 
    } else { 
 
    alert("risk is high"); 
 
    } 
 

 

 
}

<div id="wrapper"> 
 

 
    <h1>The Diabetes Risk Assesment Tool</h1> 
 
    <div id="Options"> 
 
    <p> How old are you? </p> 
 
    1-25 <input type="radio" id="opt" name="age" value="0" checked> 26-40 <input type="radio" id="opt" name="age" value="5"> 41-60 <input type="radio" id="opt" name="age" value="8"> 60+ <input type="radio" id="opt" name="age" value="10"> 
 

 
    <p> What is your BMI? </p> 
 

 
    0-25 <input type="radio" id="opt" name="bmi" value="0" checked> 26-30 <input type="radio" id="opt" name="bmi" value="0"> 31-35 <input type="radio" id="opt" name="bmi" value="9"> 35+ <input type="radio" id="opt" name="bmi" value="10"> 
 

 
    <p> Does anybody in your family have diabetes? </p> 
 

 
    No <input type="radio" id="opt" name="diabetes" value="0" checked> Grandparent <input type="radio" id="opt" name="diabetes" value="7"> Sibling <input type="radio" id="opt" name="diabetes" value="15"> Parent <input type="radio" id="opt" name="diabetes" 
 
     value="15"> 
 

 

 
    <p> How would you describe your diet? </p> 
 

 
    Low sugar <input type="radio" id="opt" name="diet" value="0" checked> Normal sugar <input type="radio" id="opt" name="diet" value="0"> Quite high sugar <input type="radio" id="opt" name="diet" value="7"> High sugar <input type="radio" id="opt" name="diet" 
 
     value="10"> 
 

 

 
    <button id="calculate" name="button_calculate" value="Calculate" onclick="calculateAndPrintRisk();">Calculate</button> 
 
    </div> 
 
</div>

請注意，您如果其他人可以簡化爲

function calculateAndPrintRisk(){ 
    alert("your risk is "+(riskTotal<=15?"low":(riskTotal<=25?"medium":"high"))); 
}

來源

2017-08-05 17:42:27

我建議你不要在noob上強制ES6。 – mplungjan

@mplungjan爲什麼不呢？然後，他可以將推薦的編輯應用到他自己的代碼中，或者他可以學習正確的JS並鬆開noob狀態。 –

您的「正確」JS需要Babel或墊片在多個瀏覽器上運行。此外適當的JS不使用內聯事件處理程序 – mplungjan

對於多個HTML元素，不能使用相同的id。我已更新代碼並使用querySelector獲取無線電元件的value。

let calc = document.getElementById('form'); 
 

 
calc.addEventListener('submit', calculateAndPrintRisk); 
 

 
function calculateRisk() { 
 
    let age = document.querySelector('input[name="age"]:checked').value; 
 
    let bmi = document.querySelector('input[name="bmi"]:checked').value; 
 
    let diabetes = document.querySelector('input[name="diabetes"]:checked').value; 
 
    let diet = document.querySelector('input[name="diet"]:checked').value; 
 
    return age + bmi + diabetes + diet; 
 
}; 
 

 
function calculateAndPrintRisk(e) { 
 
    e.preventDefault(); 
 
    var risk; 
 
    var riskTotal = calculateRisk(); 
 

 
    if (riskTotal) { 
 
    if (riskTotal <= 15) { 
 
     alert("risk is low"); 
 
    } else if (riskTotal <= 25) { 
 
     alert(risk = "medium"); 
 

 
    } else { 
 
     alert(risk = "high"); 
 
    } 
 

 

 
    } 
 
}

<div id="wrapper"> 
 

 
    <h1>The Diabetes Risk Assesment Tool</h1> 
 
    <div id="Options"> 
 
    <form id="form"> 
 
     <p> How old are you? </p> 
 
     1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10"> 
 

 
     <p> What is your BMI? </p> 
 

 
     0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10"> 
 

 
     <p> Does anybody in your family have diabetes? </p> 
 

 
     No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15"> 
 

 

 
     <p> How would you describe your diet? </p> 
 

 
     Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10"> 
 

 

 
     <input type="submit" id="calculate" name="button_calculate" value="Calculate"> 
 
    </form> 
 
    </div> 
 
</div>

來源

2017-08-05 17:47:21

我也將取消提交事件 – mplungjan

我試過你的解決方案，但代碼仍然無法正常工作。當我點擊計算什麼都不會發生，無論我在問題中選擇哪個選項。任何想法？ – Miguel

如果你點擊'Run code snippet'，代碼就會運行。所以，我的代碼沒有問題。您可以提供有關您所面臨錯誤的更多信息。 –

根據具體的值打印留言

回答

相關問題