2017-09-12 4 views
0

複数のテキストエリアの文字を別々にカウントするページをコーディングしています。この関数はうまく動作しますが、Uncaught TypeErrorのエラーが発生しています:最初のtextareaの入力を開始するときに 'innerHTML' of null 'プロパティを設定できません。コンソールで質問された2つの部分が以下に強調表示されています。Uncaught TypeError:複数のテキストエリアの文字カウントでnullの 'innerHTML'プロパティを設定できません

誰かが助けてくれますか?どのようにこれを修正することができますか?どうもありがとうございました!

enter image description here

<script> 
 
\t \t function textCounter(textField, showCountField, maxAmount,id) { 
 
\t \t \t if (textField.value.length <= maxAmount) { 
 
\t \t \t \t showCountField.value = maxAmount - textField.value.length; 
 
\t \t \t \t document.getElementById('go'+id).innerHTML = ''; 
 
\t \t \t } else { 
 
\t \t \t \t document.getElementById('go'+id).innerHTML = '<span style="color:red">Over!!</span>'; 
 
\t \t \t \t textField.value = textField.value.substring(0,maxAmount); 
 
\t \t \t } 
 
\t \t \t } 
 
</script>
<body> 
 
\t \t <form> 
 
\t \t \t <textarea id="q" name="w" onKeyUp="textCounter(this.form.q,this.form.w,5,1);" onKeyPress="textCounter(this.form.q,this.form.w,5);"></textarea><br> 
 
     <input type="text" name="w" value="5"></input> 
 
\t \t \t <p id="go1"/> 
 
\t \t </form><br> 
 
\t \t <form> 
 
\t \t \t <textarea id="a" name="s" onKeyUp="textCounter(this.form.a,this.form.s,8,2);" onKeyPress="textCounter(this.form.a,this.form.s,8); "></textarea><br> 
 
     <input type="text" name="s" value="8"></input> 
 
\t \t \t <p id="go2"/> 
 
\t \t </form><br> 
 
    </body>

+1

'getElementByIdをは( '行く' + ID)'明らかにnullを返しています。 'id'に期待する値があることを確認し、文書にそのidと一致する要素があることを確認してください。 –

+0

画像ではなく実際のコードを掲載してください。 [*最小で完全で検証可能なサンプルの作成方法*](https://stackoverflow.com/help/mcve)を参照してください。 – RobG

+0

ありがとうございました!私はコーディングを学ぶことで本当に新しいです。私がちょうど編集したHTMLを見てください。 – ycd

答えて

0

onKeyPressのリスナーは、あなたのtextCounter関数に3つの引数を渡しているが、それは四番目の引数、id 4.必要で、未定義と呼び出しとして扱われますdocument.getElementByIdには、IDがgoundefinedの要素が検索されます。

が比較:

onKeyUp="textCounter(this.form.q,this.form.w,5,1);" 
onKeyPress="textCounter(this.form.q,this.form.w,5);" 
+0

ありがとうございました!今修正しました:) – ycd

関連する問題