J'essaie de faire fonctionner la fonction innerHTML en Javascript

Je veux que la réponse de chauffage apparaisse à côté de la surface de chauffage (mm) mais je ne peux pas le faire fonctionner. Je ne reçois le message d'erreur suivant de la console chroméeJ'essaie de faire fonctionner la fonction innerHTML en Javascript

Uncaught TypeError: Cannot read property 'value' of null

Je sais que tout le reste fonctionne parce que j'ajouté une boîte d'alerte, j'ai besoin innerHTML de travailler bien.

Voici le code 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>

Voici le code 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();

Source

2013-07-22 user2606257

Il y a deux erreurs dans votre script. Dans un premier temps, lors de la mise

window.onload = pipeheater();

pipeheater est prononcée immédiatement, il n'attend pas window.onload à cuire, et vous obtenez une erreur lorsque vous essayez de lire une valeur de l'élément encore non-existant. Vous pouvez résoudre ce problème comme celui-ci:

window.onload = pipeheater;

Deuxièmement, vous essayez d'utiliser innerHTML de hsur, qui est un nombre. Vous devez définir une variable pour l'élément HTML réel. Voici votre code fixe.

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;

Vous pouvez vérifier cela fonctionne à jsFiddle. Je vous recommande de valider les valeurs de dia et thi avant de faire des calculs avec eux. En utilisant également onchange au lieu de onkeypress pourrait être plus à l'aise pour les utilisateurs, et vous donnerait des résultats plus fiables.

Source

2013-07-22 11:52:00 Teemu

Vous avez oublié de définir la "surface".

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

Vous pouvez alors faire:

surfaceSPAN.innerHTML = surface.toFixed(1);

Prenez note que vous ne pouvez pas utiliser le nom de la variable "de surface" deux fois dans un script, comme ils passer outre eachother et vous auriez pas de résultat variable.

Source

2013-07-22 10:59:24

Bien que ce soit également correct, il ne répond pas à la question;). – Teemu

Pourquoi pas exactement? –

Parce qu'il ne corrige pas l'erreur: 'Uncaught TypeError: Impossible de lire la propriété 'valeur' de null' – Teemu

J'essaie de faire fonctionner la fonction innerHTML en Javascript

Répondre

Questions connexes