使用JS顯示計算的HTML輸出-有解無憂

我正在嘗試使用 HTML 和 JS 構建一個卡路里計算器，目前正在努力在螢屏上（或通過 console.log）顯示輸出。我知道我在做一些非常基本的錯誤，但目前無法確定那是什么。

下面是我的 HTML 和 JS 代碼：

document.getElementById("bmrForm").addEventListener("submit", calcBMR);
    
    function calcBMR(gender, weightKG, heightCM, age) {
    
        // Calculate BMR
        if (gender = 'male') {
            let BMR = 10 * weightKG   6.25 * heightCM - 5 * age   5;
        } else {
            let BMR = 10 * weightKG   6.25 * heightCM - 5 * age - 161;
        }
    
        console.log(BMR);
    }

    <body>
    <script src="./script.js"></script>
    <section>
        <form id="bmrForm" onsubmit="calcBMR()">
            <input type="text" id="gender" placeholder="Male or female?">
            <input type="number" id="weight" placeholder="Weight in KG">
            <input type="number" id="height" placeholder="Height in CM">
            <input type="number" id="age" placeholder="How old are you?">
            <button type="submit" id="submitBtn">Do Magic!</button>
        </form>
        <p id="output">0</p>
    </section>
</body>

uj5u.com熱心網友回復：

為了達到您想要的結果，需要修改幾件事。

document.getElementById("bmrForm").addEventListener("submit", calcBMR);不需要該行，因為我們可以將函式直接傳遞給元素的onsubmit屬性。form
、gender、weightKG和引數不會自動傳遞給heightCM函式。需要從檔案中檢索值。agecalcBMR
由于作用域，該BMR變數需要在 if/else 塊上方定義。
return需要在屬性中添加一條陳述句onsubmit，使表單不提交和重繪頁面。或者，如果想要的效果是更新螢屏上的文本，則添加button了事件處理程式的元素click可能是比form帶有submit處理程式的更好的選擇。
字串在 JavaScript中使用==or進行比較。===因此，該gender = 'male'部分需要更改為gender === 'male'。
為了更新輸出，textContent可以使用更改元素document.getElementById("output").textContent = BMR。

下面是上面列出的更改的代碼。

function calcBMR() {
    let gender = document.getElementById("gender").value;
    let weightKG = document.getElementById("weight").value;
    let heightCM = document.getElementById("height").value;
    let age = document.getElementById("age").value;
    let BMR;
    // Calculate BMR
    if (gender === 'male') {
        BMR = 10 * weightKG   6.25 * heightCM - 5 * age   5;
    } else {
        BMR = 10 * weightKG   6.25 * heightCM - 5 * age - 161;
    }

    console.log(BMR);
    document.getElementById("output").textContent = BMR;
    return false;
}

<body>
<script src="./script.js"></script>
<section>
    <form id="bmrForm" onsubmit="return calcBMR()">
        <input type="text" id="gender" placeholder="Male or female?">
        <input type="number" id="weight" placeholder="Weight in KG">
        <input type="number" id="height" placeholder="Height in CM">
        <input type="number" id="age" placeholder="How old are you?">
        <button type="submit" id="submitBtn">Do Magic!</button>
    </form>
    <p id="output">0</p>
</section>

uj5u.com熱心網友回復：

首先，您正在使用帶有的按鈕type="submit"，該按鈕用于將表單資料提交到將接收并處理它的資源。在這種情況下，您可能只需要一個按鈕，type="button"該按鈕只會執行您配置的操作（在螢屏上顯示結果）。

進行該更改后，您應該使用結果填充一個預先存在但為空的元素。

但是您確實對宣告的方式和地點有疑問BMR。let宣告應該在代碼之外但if/then在函式內部，因此它具有整個函式的范圍。

此外，您的按鈕 ID 在事件處理程式設定中不正確。

接下來，您從 HTML 元素獲得的任何值都將是一個字串，如果您打算使用該值進行數學運算，則需要將其轉換為 JavaScript 數字。有幾種方法可以做到這一點，但一種速記方法是在值前面加上 a ，正如您將在下面看到的那樣。

此外，如果有人Male在性別文本框中輸入，您的代碼不會將其視為男性，因為您的代碼只檢查male，而不是Male。通過強制輸入小寫，您的代碼將起作用（前提是它們拼寫正確）。最好使用一組單選按鈕或下拉串列供用戶選擇。

并且，與此相結合，JavaScript=用于分配值，而不是比較。對于松散相等（自動型別轉換）使用==和嚴格相等（無型別轉換），使用===.

let out = document.getElementById("output");
let gender = document.getElementById("gender");
let height = document.getElementById("height");
let weight = document.getElementById("weight");
let age = document.getElementById("age");

// If you want to pass arguments to the event handler, you need to wrap the handler call in another function
document.getElementById("submitBtn").addEventListener("click", function(){calcBMR(gender.value.toLowerCase(),  weight.value,  height.value,  age.value)});
    
    function calcBMR(gender, weightKG, heightCM, age) {
        let BMR = null;  // Declare the variable in the function scope
        console.log(gender, weightKG, heightCM, age);
    
        // Calculate BMR
        if (gender === 'male') {
            BMR = 10 * weightKG   6.25 * heightCM - 5 * age   5;
        } else {
            BMR = 10 * weightKG   6.25 * heightCM - 5 * age - 161;
        }
    
        console.log(BMR);
        output.textContent = BMR;
        
    }

<body>
    <script src="./script.js"></script>
    <section>
        <form id="bmrForm" onsubmit="calcBMR()">
            <input type="text" id="gender" placeholder="Male or female?">
            <input type="number" id="weight" placeholder="Weight in KG">
            <input type="number" id="height" placeholder="Height in CM">
            <input type="number" id="age" placeholder="How old are you?">
            <button type="button" id="submitBtn">Do Magic!</button>
        </form>
        <p id="output">0</p>
    </section>
</body>

uj5u.com熱心網友回復：

作業密碼筆

您的代碼中有一些基本缺陷。話雖如此，學習這個真的會讓你對 Javascript 有一個正確的理解。

HTML：

 <body>
    <section>
        <form id="bmrForm">
            <input type="text" id="gender" placeholder="Male or female?" name="gender">
            <input type="number" id="weight" placeholder="Weight in KG" name="weight">
            <input type="number" id="height" placeholder="Height in CM" name="height">
            <input type="number" id="age" placeholder="How old are you?" name="age">
            <button type="submit" id="submitBtn">Do Magic!</button>
        </form>
        <p id="output">0</p>
    </section>
</body>

Javascript：

document.getElementById("bmrForm").addEventListener("submit", calcBMR);
const output = document.querySelector('#output')
    
function calcBMR(e) {
      e.preventDefault();
  
  output.innerText = ''
  const formData = new FormData(e.target)
  const { age, gender, height, weight} = Object.fromEntries(formData);

      let BMR  = 0
        // Calculate BMR
        if (gender === 'male') {
            BMR = 10 * parseInt(weight)   6.25 * parseInt(height) - 5 * parseInt(age)   5;
        } else {
             BMR = 10 * parseInt(weight)   6.25 * parseInt(height) - 5 * parseInt(age) - 161;
        }
    
        output.innerText = BMR
    }

uj5u.com熱心網友回復：

您可以洗掉該行 document.getElementById("bmrForm").addEventListener("submit", calcBMR);

您可以將事件傳遞給 onsubmit - <form id="bmrForm" onsubmit="calcBMR(event)">

function calcBMR(e) {
e.preventDefault();
var elements = document.getElementById("bmrForm").elements; // logic to get all form elements
var obj ={};
for(var i = 0 ; i < elements.length ; i  ){
    var item = elements.item(i);
    obj[item.id] = item.value;
}
const {gender, weight, height, age } = obj; //Get values from obj
// Calculate BMR
let BMR = '';
if (gender === 'male') {
    BMR = 10 * weight   6.25 * height - 5 * age   5;
} else {
    BMR = 10 * weight   6.25 * height - 5 * age - 161;
}
console.log(BMR);
}

uj5u.com熱心網友回復：

在樹BMR中if，它必須在父節點中。

試試這個！

document.getElementById("bmrForm").addEventListener("submit", calcBMR);

const output = document.getElementById('output');

function calcBMR(event) {
    // Get the [gender, weightKG, heightCM, age] value
    let gender = document.getElementById('gender').value;
    let weightKG = document.getElementById('weight').value;
    let heightCM = document.getElementById('height').value;
    let age = document.getElementById('age').value;

    // Set default BMR to 0
    let BMR = 0;
    // Calculate BMR
    if (gender = 'male') {
        BMR = 10 * weightKG   6.25 * heightCM - 5 * age   5;
    } else {
        BMR = 10 * weightKG   6.25 * heightCM - 5 * age - 161;
    }

    console.log(BMR);
    output.innerText = BMR;

    // Cancel form submit
    event.preventDefault();
    return;
}

<body>
    <script src="./script.js"></script>
    <section>
        <form id="bmrForm">
            <input type="text" id="gender" placeholder="Male or female?">
            <input type="number" id="weight" placeholder="Weight in KG">
            <input type="number" id="height" placeholder="Height in CM">
            <input type="number" id="age" placeholder="How old are you?">
            <button type="submit" id="submitBtn">Do Magic!</button>
        </form>
        <p id="output">0</p>
    </section>
</body>

uj5u.com熱心網友回復：

我使用選擇器而不是文本欄位來表示性別。
我曾經form.elements從表單中獲取值。
我曾經event.preventDefault();阻止表單在提交時重定向。

// your form
var form = document.getElementById("formId");

var DoMagic = function(event) 
{
  event.preventDefault();
  var elements = form.elements;
  if (elements["gender"].value == "male") 
  {
    var result = 10 * elements["weight"].value   6.25 * elements["height"].value - 5 * elements["age"].value   5;
  }
  else 
  {
    var result = 10 * elements["weight"].value   6.25 * elements["height"].value - 5 * elements["age"].value - 161;
  }
  document.getElementById("result").textContent = "Result: "   result;
}

// attach event listener
form.addEventListener("submit", DoMagic, true);

<form id = "formId">
  <label>Gender</label>
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <br>
  <label>Weight (kg)</label>
  <input name="weight" type="number">
  <br>
  <label>Height (cm)</label>
  <input name="height" type="number">
  <br>
  <label>Age (years)</label>
  <input name="age" type="number">
  <br>
  <input type="submit" value="Do Magic!">
</form>
<span id='result'> </span>

uj5u.com熱心網友回復：

試試這個，你幾乎完成了，只需在用戶單擊按鈕時從輸入中獲取值。

但我必須注意到，該按鈕將立即重定向到新頁面，如果您想向自己展示結果submit，則應使用該按鈕。click

document.getElementById("submitBtn").addEventListener("click",function(){
let gen = document.querySelector('#gender').value
   let weight = document.querySelector('#weight').value
    let height = document.querySelector('#height').value
     let ages = document.querySelector('#age').value
calcBMR(gen,weight,height,ages)
})
    function calcBMR(gender, weightKG, heightCM, age) {
       let BMR
        // Calculate BMR
        if (gender = 'male') {
            BMR = 10 * weightKG   6.25 * heightCM - 5 * age   5;
        } else {
            BMR = 10 * weightKG   6.25 * heightCM - 5 * age - 161;
        }
    
        document.querySelector('#output').textContent = BMR;
    }

<body>
    <script src="./script.js"></script>
    <section>
        <form id="bmrForm">
            <input type="text" id="gender" placeholder="Male or female?">
            <input type="number" id="weight" placeholder="Weight in KG">
            <input type="number" id="height" placeholder="Height in CM">
            <input type="number" id="age" placeholder="How old are you?">
            <button id="submitBtn">Do Magic!</button>
        </form>
        <p id="output">0</p>
    </section>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/418226.html

標籤：

上一篇：Toggle基于復選框值的HTML表格行的可見性

下一篇：是否可以多次搜索正則運算式？[復制]