用JS显示计算的Html输出-前端问题

Using JS to show HTML output of calculation(用JS显示计算的Html输出)

本文介绍了用JS显示计算的Html输出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用HTML和JS构建一个卡路里计算器，目前正在努力在屏幕上(或通过console.log)显示输出。我知道我正在做一些非常基本、非常错误的事情，但目前无法确定是什么。

下面是我的HTML和JS代码：数据-lang="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>

推荐答案

需要修改几项内容才能达到预期效果。

不需要document.getElementById("bmrForm").addEventListener("submit", calcBMR);行，因为我们可以将函数直接传递给form元素的onsubmit属性。
gender、weightKG、heightCM和age参数不会自动传递给calcBMR函数。需要从文档中检索值。
由于scoping，需要在If/Else块上方定义BMR变量。
需要向onsubmit属性添加return语句，以便表单不会提交和刷新页面。或者，如果期望的效果是更新屏幕上的文本，则添加了click事件处理程序的button元素可能比添加了submit处理程序的form元素更好。
字符串在JavaScript中使用==或===进行比较。因此，gender = 'male'部分需要更改为gender === 'male'。
为了更新输出，可以使用document.getElementById("output").textContent = BMR更改元素的textContent。

下面是包含上面列出的更改的代码。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于用JS显示计算的Html输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！