Débogage Javascript - le script fonctionne avec une variable codée en dur, pas avec getElementById ('id'). Value

Question

J'essaie de déboguer du javascript que j'ai écrit et je n'arrive pas à comprendre pourquoi cela ne fonctionne pas. Si je code dur les variables cela fonctionne bien, mais si j'utilise document.getElementById ('id'). Value pour obtenir la variable, il échoue.

L'exemple ci-dessous fonctionne bien, mais dès que je ne commente pas les lignes commentées, ce n'est pas le cas. Impression des variables avant et après la deuxième section, ils semblent être identiques.

Vraiment pas ce qui se passe. Peut-être que j'ai juste besoin de dormir dessus, mais si quelqu'un a des suggestions ce serait génial!

roof_width = 5; 
roof_depth = 3; 
panel_width = 2; 
panel_depth = 1; 
panel_power = 200; 
roof_margin = 0.100; 
panel_gap = 0.05; 

roof_width = document.getElementById('roof_width').value; 
roof_depth = document.getElementById('roof_depth').value; 
// panel_width = document.getElementById('panel_width').value; 
// panel_depth = document.getElementById('panel_depth').value; 
panel_power = document.getElementById('panel_power').value; 
// roof_margin = document.getElementById('roof_margin').value; 
panel_gap = document.getElementById('panel_gap').value; 

Answer 1

Essayez-vous d'ajouter des numéros dans des zones de texte? En raison du fonctionnement du système de typage des variables de JavaScript (combiné avec la surcharge de l'opérateur +), 2 + 2 === 4 (en ajoutant des nombres) mais '2' + '2' === '22' (concaténation de chaînes). Essayez de changer les lignes, par exemple:

panel_width = parseFloat(document.getElementById('panel_width').value); 

ou bien:

panel_width = Number(document.getElementById('panel_width').value); 

Cela garantira que JavaScript traite les nombres comme des nombres plutôt que comme des chaînes.

Answer 2

Pherhaps vous avez plusieurs éléments dom avec le même id? Rappelez-vous que l'ID de l'élément dom doit être unique. Je vous suggère d'utiliser jquery pour interagir avec javascript avec html.

Answer 3

Les paramètres JavaScript ne peuvent pas être appelés de la même manière que vous appelez des éléments HTML. Pour appeler

document.getElementById('roof_margin').value; 

vous devez attribuer « roof_margin » à un élément de formulaire HTML.

Answer 4

Assurez-vous que votre code est dans une fonction de chargement. Sinon, les éléments n'ont peut-être pas encore été chargés dans le DOM.

window.onload = funciton(){/* code here */};