我想在Javascript中使用innerHTML函數來工作

我希望加熱答案出現在加熱表面（毫米）旁邊，但我無法使其工作。我只能從鉻控制檯我想在Javascript中使用innerHTML函數來工作

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();

來源

2013-07-22 user2606257

腳本中有兩個錯誤。起初，設置

window.onload = pipeheater();

pipeheater立即調用時，它沒有等待window.onload被解僱，並試圖讀取尚未不存在的元素的值，當你得到一個錯誤。你可以這樣解決這個問題：

window.onload = pipeheater;

其次，您嘗試使用的hsurinnerHTML，這是一個數字。您需要爲實際的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可能對用戶更舒適，並且會給你更可靠的結果。

來源

2013-07-22 11:52:00 Teemu

你忘了定義「面」。

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

然後你可以這樣做：

surfaceSPAN.innerHTML = surface.toFixed(1);

請注意，你不能在一個腳本中兩次使用變量名「面」，因爲他們將否決海誓山盟，你不得不沒有可變的結果。

來源

2013-07-22 10:59:24

雖然這也是正確的，但它沒有回答這個問題; ）。 – Teemu

爲什麼不呢？ –

因爲它不能解決這個錯誤：'未捕獲的類型錯誤：無法讀取'空'的屬性'值' – Teemu

我想在Javascript中使用innerHTML函數來工作

回答

相關問題