如何使用xhtml在javascript中创建函数调用

这是我迄今为止的代码，我在获取执行函数的代码并将函数中的数据正确输出到"Total BMI"文本框时遇到了问题，我已经为此搜索了几个小时，试图找出答案。这是一个类作业，我遇到了麻烦，因为我不理解javascript中用于完成所需任务的语法。我的老师真的帮不上忙，因为这是我们的第二项作业，而且从未听过关于如何开始用Javascript编写代码的讲座。感谢任何人提供的帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BMI Calculator</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="BMI.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
function calcBMI(Height, Weight) {
     var h = parseInt(height);s
     var w = parseInt(Wieght);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}
/* ]]> */
</script>
</head>
<body>
<h2>BMI Calculator</h2>
<form action="" name="BMI">
<table border="1">
<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" /></td></tr>
<tr><td><input type = "button" value = "Calculate" onclick = "calcBMI('Height', 'Weight')"></td></tr>
<tr><td>Total BMI:</td><td><input type="text" name="TotalBMI" value="" /></td></tr>
</table>
</form>
</body>
</html>

此处，

onclick = "calcBMI('Height', 'Weight')"

您传递的是字符串'Height'和'Weight'，尽管您的意思是传递相关字段的值。表单不是这样工作的，所以你应该完全去掉这些参数，

onclick = "calcBMI()"

在函数中，使用DOM遍历来获取所需的值。首先，将一些id属性添加到您感兴趣的字段中，例如

<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" id="height" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" id="width" /></td></tr>

然后得到它们的值如下：

function calcBMI() {
     var h = parseInt(document.getElementById('height').value);
     var w = parseInt(document.getElementById('weight').value);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}

首先让我们看看这个：

onclick = "calcBMI('Height', 'Weight')"

您在这里传递的字符串，其中不能转换为整数（至少不是您期望的类型）。看起来您想要获得名称为Height和Width的元素的值。这是对id而不是name的一个很好的利用。

<tr><td>Height :(in)</td><td><input type="text" id="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" id="Weight" value="" /></td></tr>
...
<tr><td>Total BMI:</td><td><input type="text" id="TotalBMI" value="" /></td></tr>

现在calcBMI()函数不需要任何参数，因为我们可以像这样直接获取它们：

document.getElementById("Height").value;

因此，以下是对您的功能的更改：

function calcBMI() {
    var h = parseInt(document.getElementById("Height").value);
    var w = parseInt(document.getElementById("Weight").value);
    var TotalBMI = w * 703 / (h * h);
    document.getElementById("TotalBMI").value = "Your BMI is: " + TotalBMI;  
}

注意，我将document.write()更改为.innerHTML。因为在页面加载之后运行document.write()会重写DOM。

另外请注意，提交<form>将刷新您的页面。你似乎并不真的需要<form>，所以我建议删除它。要么这样，要么阻止默认的页面刷新行为。

相关内容

最新更新

热门标签：