Javascript函数没有使用innerHTML做任何事情

时间:2015-06-19 14:59:26

标签: javascript html function

所以,我编写了以下代码来计算BMI。我面临的问题是我的javascript函数不起作用。我甚至尝试通过插入示例文本(在代码中注释)来使用javascript进行测试,但这不起作用。有人可以帮我找出问题吗?

<h2>Welcome to BMI calculator</h2>
<h4>Please fill in the required data.</h4>

<form name="bmiform">
  <fieldset style="width:280px;">
    <legend>
      BMI CALCULATOR
    </legend>

    Name:
    <input type="text" value="" name="name">
    <br>
    <br>Height:
    <input type="text" value="" name="height">Meters
    <br>
    <br>Weight:
    <input type="text" value="" name="weight">Kilograms
    <br>
    <br>
    <input type="button" value="Calculate" onclick="BMIcalc(document.bmiform.weight.value,document.bmiform.height.value)">

  </fieldset>
</form>
<div>
  <br>
  <br>Your BMI is: <b id="samples"></b>
  <!--Inner HTML does not inserts text in here-->

  <script>
    document.getElementById("samples").innerHTML = "Testing purposes"; //This code does not work.
    function BMIcalc(parseFloat(weight), parseFloat(height)) {
      var bmi = (weight / (height * height));
      document.getElementById("samples").innerHTML = bmi;
    }
  </script>

  <br>
  <br>
  <table border="1" width="300px">
    <tr>
      <th>
        BMI
      </th>
      <th>
        Weight Status
      </th>
    </tr>
    <tr>
      <td>
        Below 18.5
      </td>
      <td>
        Underweight
      </td>
    </tr>

    <tr>
      <td>
        18.5-24.9
      </td>
      <td>
        Normal
      </td>
    </tr>

    <tr>
      <td>
        25.0-29.9
      </td>
      <td>
        Overweight
      </td>
    </tr>

    <tr>
      <td>
        30.0 and above
      </td>
      <td>
        Obese
      </td>
    </tr>

  </table>
</div>

3 个答案:

答案 0 :(得分:1)

你不能在你的函数声明中做这样的function BMIcalc(parseFloat(weight), parseFloat(height))

必须是function BMIcalc(weight, height)并且你的parsefloat应该在你的函数体内或函数调用中。

答案 1 :(得分:1)

按如下方式编辑你的函数,应该在函数内调用parseFloat,你不能像你一样在函数声明参数中调用函数:

function BMIcalc(weight, height) {
  var bmi = (parseFloat(weight) / (parseFloat(height) * parseFloat(height)));
  document.getElementById("samples").innerHTML = bmi;
}

答案 2 :(得分:0)

编辑: 1.我不想将任何值解析为onclick,因此我将检索移动到函数BMIcalc中。 2.您无法对参数字段执行任何操作,您必须在函数中解析或执行其他操作。

&#13;
&#13;
document.getElementById("samples").innerHTML = "Testing purposes"; //This code does not work.
    function BMIcalc() {
      var weight = parseFloat(document.bmiform.weight.value);
      var height = parseFloat(document.bmiform.height.value);
      var bmi = (weight / (height * height));
      document.getElementById("samples").innerHTML = bmi;
    }
&#13;
<h2>Welcome to BMI calculator</h2>
<h4>Please fill in the required data.</h4>

<form name="bmiform">
  <fieldset style="width:280px;">
    <legend>
      BMI CALCULATOR
    </legend>

    Name:
    <input type="text" value="" name="name">
    <br>
    <br>Height:
    <input type="text" value="" name="height">Meters
    <br>
    <br>Weight:
    <input type="text" value="" name="weight">Kilograms
    <br>
    <br>
    <input type="button" value="Calculate" onclick="BMIcalc()">

  </fieldset>
</form>
<div>
  <br>
  <br>Your BMI is: <b id="samples"></b>
  <!--Inner HTML does not inserts text in here-->
  <br>
  <br>
  <table border="1" width="300px">
    <tr>
      <th>
        BMI
      </th>
      <th>
        Weight Status
      </th>
    </tr>
    <tr>
      <td>
        Below 18.5
      </td>
      <td>
        Underweight
      </td>
    </tr>

    <tr>
      <td>
        18.5-24.9
      </td>
      <td>
        Normal
      </td>
    </tr>

    <tr>
      <td>
        25.0-29.9
      </td>
      <td>
        Overweight
      </td>
    </tr>

    <tr>
      <td>
        30.0 and above
      </td>
      <td>
        Obese
      </td>
    </tr>

  </table>
</div>
&#13;
&#13;
&#13;