Question

我正在尝试创建一个心率区计算器，但它不会显示计算结果。我是javascript和html（来自java背景）的新手，所以对此有任何帮助和建设性的批评，我们表示赞赏！

<html>
<head>
    <title>BMI Calculator</title>
    <script type="text/javascript">
        function CalculateBMI()
        {
            //Obtain user inputs
            var Intensity = Number(document.getElementById("Intensity").value);
            var select_intensity = document.getElementById("select_intensity").value;
            var Age = Number(document.getElementById("Age").value);

            //Perform calculation based on intensity
            if (select_intensity == "Moderate") {
                var output =  (220-Age)*.5;
                var output2 = (220-Age)*.7;
            }


            if (select_intensity == "High Intensity") {
                output = (220 - Age) * .7;
                output2 = (220 - Age) * .85;

            }

            //Display result of calculation
            document.getElementById("output").innerHTML=output " to " output2;


        }
    </script>
</head>
<body>
<h1>Heart Rate Zone Calculator</h1>
<p>Select Your Workout Intensity: <select type="multiple" id="Intensity">

        <option value="Moderate"selected="selected">Moderate</option>
        <option value="High Intensity">High Intensity</option>

    </select>
</p>
<p>Enter your age: <input type="text" id="Age"/>

</p>
<input type="submit" value="Calculate Target Heart Rate" onclick="CalculateBMI();">
<h1>Your Target Heart Rate Zone Is: <span id="output" >?</span></h1>

</body>

Answer 1

您的Javascript存在以下几个问题：

1）你有2个强度变量：

var Intensity = Number(document.getElementById("Intensity").value);
var select_intensity = document.getElementById("select_intensity").value;

Intensity指的是正确的元素，但您的所有代码似乎只引用了select_intensity变量。这样做：

var select_intensity = document.getElementById("Intensity").value;

2）您忘记在+字符串周围放置" to "以进行连接。

document.getElementById("output").innerHTML=output + " to " + output2;

修复这两个问题应该会使它发挥作用。

Answer 2

删除

var Intensity = Number(document.getElementById("Intensity").value);

并更改

var select_intensity = document.getElementById("Intensity").value;

到

var select_intensity = document.getElementById("select_intensity ").value;

同时更改此

document.getElementById("output").innerHTML=output + " to " + output2;

这最终是你的代码应该是什么样子

＆＃13;

<html>
<head>
    <title>BMI Calculator</title>
    <script type="text/javascript">
        function CalculateBMI()
        {
            //Obtain user inputs
            //var Intensity = Number(document.getElementById("Intensity").value);
            var select_intensity = document.getElementById("Intensity").value;
            var Age = Number(document.getElementById("Age").value);

            //Perform calculation based on intensity
            if (select_intensity == "Moderate") {
                var output =  (220-Age)*.5;
                var output2 = (220-Age)*.7;
            }


            if (select_intensity == "High Intensity") {
                output = (220 - Age) * .7;
                output2 = (220 - Age) * .85;

            }

            //Display result of calculation
            document.getElementById("output").innerHTML=output + " to " + output2;


        }
    </script>
</head>
<body>
<h1>Heart Rate Zone Calculator</h1>
<p>Select Your Workout Intensity: <select type="multiple" id="Intensity">

        <option value="Moderate"selected="selected">Moderate</option>
        <option value="High Intensity">High Intensity</option>

    </select>
</p>
<p>Enter your age: <input type="text" id="Age"/>

</p>
<input type="submit" value="Calculate Target Heart Rate" onclick="CalculateBMI();">
<h1>Your Target Heart Rate Zone Is: <span id="output" >?</span></h1>

</body>

＆＃13;

Answer 3

smaili的答案总结了一下。我想补充一点，作为一个新的javascript程序员，你需要熟悉浏览器中的console.log()和F12（除非你有一个完整的JS开发IDE）。

javascript / html不会显示计算结果

3 个答案: