如何计算用户输入并在同一页面上显示（javascript）

Question

I want to code a BMI calculator, i'm new to javascript, so its a little task for me. I have the HTML code ready and i linked the js file.

In the javascript file i declared 2 variables that take the users input. Then i declared the result in a variable. After i made a function that displays that result on the page. But i can't get it to work. I can only put in 1 id in the result variable.

How can i get this to work?

Thanks!

When i press on the button it only shows me the Weight , and not the (Number(inputWeight)) / (Number(inputLength) * Number(inputLength)) ;

Thats the formula to calculate BMI.

                <form name="myForm">

                <div class="form-item">
                <label class="form-label">Length (in cm):</label>
                <input type="number" class="form-input" name="length" placeholder="Type your length" id="length">
                </div>

                <div class="form-item">
                <label class="form-label">Weight (in kg):</label>
                <input type="number" class="form-input" name="weight" placeholder="Type your weight" id="weight">
                </div>

                <div class="form-button">
                    <input class="button" id="submit-bmi" value="calculate" type="submit" onclick="displayBMI(); return false">
                </div>

                <p id="result" class="bmi-calculator__result js-bmiresult"></p>

            </form>

The javascript:

var inputLength = document.getElementById('length'); 
var inputWeight = document.getElementById('weight'); 
var totalBMI = (Number(inputWeight)) / (Number(inputLength) * Number(inputLength)); 

function displayBMI() { 
document.getElementById('result').innerHTML = "Your BMI is: " + 
   document.myForm.weight.value; 
}

Answer 1

<script>
 function displayBMI()
  {
    var length = Number(document.getElementById("length").value);
    var weight  = Number(document.getElementById("weight").value);
    var result = weight/(length * length);
    document.getElementById("result").innerHTML = result ;

  }
</script>

You just insert this script on your code.