なぜエラー 'addEventListener'プロパティが表示されないのですか？

Question

私はこの機能を使用しようとしています：「addEventListenerを」プロパティを読み取ることができません：

<div id="one"> 
<div class="options-parameters-input"> 
gfdgd 
</div> 
</div> 
<br /><br /><br /><br /><br /><br /><br /> 
<table width="750" border="1" cellspacing="3" style="float:left;"> 
    <tr> 
    <td>Test</td> 
    <td><textarea id="DN"></textarea></td> 
    </tr> 
</table> 

var DN = document.getElementById("DN"); 
DN.addEventListener("keyup",both); 

function both(){ 
document.getElementsByClassName("options-parameters-input")[0].style.fontSize = this.value+'px'; 
} 

http://jsfiddle.net/gxTuG/89/

をしかし、私は私のphpBBのカスタムテーマにこのコードを移動すると、その後、私はこのエラーを取得： キャッチされない例外TypeErrorをnull（...）

なぜですか？

私のjavacriptファイルもフッターから呼び出されます。

私は何をする必要があるかわからない、私はあなたが私を助けることを願っています。あなたはDNのIDを持っていますが、エラーに基づいて複数の要素を持っているので

はたぶん

Answer 1

Please check below code perfectly run. 

<div id="one"> 
<div class="options-parameters-input"> 
Example 
</div> 
</div> 
<br /><br /><br /><br /><br /><br /><br /> 
<table width="750" border="1" cellspacing="3" style="float:left;"> 
    <tr> 
    <td>Test</td> 
    <td><textarea id="DN"></textarea></td> 
    </tr> 
</table> 
<script> 
var DN = document.getElementById("DN"); 
DN.addEventListener("keyup",both); 

function both(){ 
document.getElementsByClassName("options-parameters-input")[0].style.fontSize = this.value+'px'; 
} 

</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>