javascript - 在我的javascript函数中，我试图从表单用户输入中获取值到我创建的函数并输出答案

Question

我正在尝试将表单中的值转换为函数并返回值这是我的函数

function createInput(){
  var weight;
  weight = document.bmiCalc.weight.value;

  var height = getElementById('height').value;
  input.onclick = function calcBMI()
    {
    // calculate users BMI

    var BMI = weight * 703 / Math.pow(height, 2);
  return BMI;
  }
  document.getElementById("BMI").appendChild();
}

这是我的html页面中的表单代码

    <form id="bmiCalc">
      <h2> Calculate your Current BMI</h2>
        <p><label> Please enter your weight in lbs: <input type="text" name = "weight" id=   "weight"></label></p>
        <p><label>  Please enter your height in inches: <input type="text" name ="height" id="height"></label>
          <button type="submit">Submit</button></p>
        <p><label> Your current BMI is: <input name="BMI" id="BMI"></label></p>
     </form>

Answer 1

更改了您的 html 和 js：

http://jsfiddle.net/CQxnx/

html:

<h2> Calculate your Current BMI</h2>
<label> Please enter your weight in lbs:</label> <input type="text" name="weight" id="weight">
<br />    
<label>  Please enter your height in inches:</label> <input type="text" name="height" id="height">
    <br />
    <input type="button" value="calculate" onclick="calcBMI();" />
    <br />

 <div id="msg"></div>

js：

function calcBMI(){
    var weight = document.getElementById('weight').value;

    var height = document.getElementById('height').value;
     // calculate users BMI

    var BMI = weight * 703 / Math.pow(height, 2);
    var msg = document.getElementById('msg');
    msg.innerHTML = 'Your current BMI is:' + BMI;

}

Answer 2

你似乎有点偏离，但你从来没有真正调用过这个createInput函数。即使在那之后，您实际上也不会附加输入按钮。没有BMIID 元素，并且createInput会在调用时计算重量/高度，而不是在单击按钮时。

相反，您应该只将按钮放在 DOM 中，然后将计算函数绑定到它。

document.getElementById('calculate').addEventListener('click', function () {
    document.getElementById("BMI").textContent =
        document.getElementById('weight').value * 703 /
        Math.pow(document.getElementById('height').value, 2);
});

http://jsfiddle.net/fsKNb/