Impossible de définir la propriété innerHTML avec Javascript

Question

Je souhaite définir le texte d'un élément p à l'aide de Javascript. Que puis-je faire pour corriger mon erreur et définir correctement le texte? Pourquoi ai-je cette erreur?

Lorsque j'exécute generate() en cliquant sur le bouton html à partir de cette ligne de code dans mon fichier html,

<input type="submit" value="Generate!" onclick="generate()"> 

que je reçois l'erreur suivante dans la console:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Ci-dessous mon Fonction generate() dans mon fichier javascript randomizer.js référencé.

function generate() { 
    var team = document.getElementById('template').cloneNode(true) 
    console.log('queryselector', team.querySelectorAll('p')[0].innerHTML) 
    team.querySelectorAll('p')[0].innerHTML = "ah hah!"; 
} 

Voici quelques autres considérations et notes:

1. Mon fichier Javascript est référencé à la fin de mon document html comme ceci:

...

<script type="text/javascript" src='randomizer.js'></script> 
</body> 
</html> 

2. La sortie de queryselector de mon instruction console.log est défini et affiche correctement le texte actuel à l'intérieur de l'élément p. Donc, il est étrange que lorsque j'essaie de le définir, cela suggère que team est nul.

Answer 1

Mon code semble fonctionner comme prévu maintenant. Malheureusement, je sais maintenant exactement pourquoi. J'ai laissé mon ordinateur et mon navigateur allumés et quand je suis revenu, j'ai remarqué deux messages d'erreur dans la console mais je n'ai pas pu les lire car j'ai déjà cliqué sur Actualiser. Je pense pour l'instant que je dois balayer ceci comme problème de navigateur étrange ou peut avoir été quelques lignes de code que j'avais insérées après ceci (non montré). Merci tout le monde.