Question

我希望加热答案显示在加热表面（mm）旁边，但我无法使其工作。我只从chrome控制台获得以下错误消息

Uncaught TypeError: Cannot read property 'value' of null

我知道其他一切都有效，因为我添加了一个警告框，我需要使用innerHTML才能工作。

这是html：

 <html>

<head>
<script type="text/javascript" src="pipeheaterfunction.js">
</script>
</head>

<body>

<table>
<tr><td>Inner Diameter (mm):</td>
<td><input id="dia" onkeypress="pipeheater();"></td>

<tr><td>Pipe Thickness (mm):</td>
<td><input id="thi" onkeypress="pipeheater();"></td>

<tr><th>Calculate heater:</th>
<td><button onclick="pipeheater();">Calculate</button></td></tr>

<tr><td>Heating Surface(mm):</td>
<td><span class="output" id="surface"></span></td></tr>
</table>

</body>


</html>

以下是javascript代码：

function pipeheater(){ //dia is the inner diameter of a pipe, thi is the pipe thickness

var dia = document.getElementById("dia").value;
var thi = document.getElementById("thi").value;
var hsur; //hsur is the heating surface required for a certain pipe in mm

hsur = 5*Math.sqrt(((dia-thi)*thi)/2);

var surface = hsur;


if(surface>0){
surface.innerHTML=surface.toFixed(1);
alert(surface.toFixed(1));
}


}

window.onload=pipeheater();

Answer 1

您的脚本中有两个错误。首先，设置时

window.onload = pipeheater();

立即调用

pipeheater，它不会等待window.onload被触发，并且在尝试读取尚未存在的元素的值时会出错。你可以像这样解决这个问题：

window.onload = pipeheater;

其次，您尝试使用innerHTML hsur，这是一个数字。您需要为实际的HTML元素定义变量。以下是您的固定代码。

function pipeheater() {
    var dia = document.getElementById("dia").value,
        thi = document.getElementById("thi").value,
        hsur = 5 * Math.sqrt(((dia - thi) * thi) / 2),
        surface = document.getElementById("surface");

    if (hsur > 0) {
        surface.innerHTML = hsur.toFixed(1);
        alert(hsur.toFixed(1));
    }
}

window.onload = pipeheater;

您可以在jsFiddle查看其工作原理。我建议您在对它们进行任何计算之前验证dia和thi的值。使用onchange代替onkeypress可能会让用户感觉更舒服，并且可以为您提供更可靠的结果。

Answer 2

你忘了定义“表面”。

var surfaceSPAN = document.getElementById("surface");

然后你可以这样做：

surfaceSPAN.innerHTML = surface.toFixed(1);

请注意，您不能在一个脚本中使用变量名称“surface”两次，因为它们会相互颠覆并且您没有变量结果。

我正在尝试使用Javascript中的innerHTML函数来工作

2 个答案: