Cannot set property 'textContent' of nullというエラー

###前提・実現したいこと
インプレス社
"ゲームで学ぶ「javascript入門」"を学んでいます。
AND,OR をチェックするサンプルコードを何度も見直し写経したのですが、全く間違えが見つけられなく、身を焦がしております。どなたかお力を貸していただけないでしょうか。
chromeで実行しました。

###発生している問題・エラーメッセージ

test.html:11 Uncaught TypeError: Cannot set property 'textContent' of null

###該当のソースコード

html
1
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta charset="utf-8">
6        <script>
7            function update(){
8                var a = document.getElementById("a").checked;
9                var b = document.getElementById("b").checked;
10                var c = document.getElementById("c").checked;
11                document.getElementById("r0").textContent = (a && b && c);
12                document.getElementById("r1").textContent = (a || b || c);
13            }
14        </script>
15    </head>
16    <body>
17        <h2>AND/OR test</h2>
18        a:<input type="checkbox" id="a" onchange="update()" />
19        b:<input type="checkbox" id="b" onchange="update()" />
20        c:<input type="checkbox" id="c" onchange="update()" />
21        <p>
22            A && B && C => <span id-"r0"> </span><br />
23            A || B || C => <span id="r1"> </span><br />
24        </p>
25    </body>
26</html>
27

行動規範の内容に同意します

回答1件

ベストアンサー

<span id-"r0">

id="r0" ですね。

=でないとIDなどの属性は認識しません。

投稿2017/09/17 08:35

m.ts10806

総合スコア80850

hoge01

2017/09/17 08:36

メガ節穴でした。しょーもない質問で申し訳ありませんでした

m.ts10806

2017/09/17 08:40

よくあるタイプミスです。キーボード上は同じキーですしね。

m.ts10806

2017/09/17 08:41

「test.html:11」のようにエラーが出た行数も出るのでそこを中心に確認すると良いですよ。

hoge01

2017/09/17 08:44

ありがとうございます。大変参考になります。逆に11行目ばっかり見てたら気づかなかったんですよね。今後気を付けてみようと思います。

m.ts10806

2017/09/17 08:52

エラーの意味自体はGoogle検索でもGoogle翻訳でも調べようと思えば調べられますし、意味が分かれば辿りやすくなります。今回のようなケースはオブジェクトのプロパティを参照できない＝オブジェクトが正しく参照できない＝オブジェクトを取得できていないということで、どのオブジェクトが参照できないんだろう？というところで見ていくと分かりやすいと思います。それを回避するためにも1回オブジェクトを変数で受けてnullチェックをしてから参照すると良いかもしれません。 var r0 = document.getElementById("r0"); if ( r0 != null ){ r0.textContent = (a && b && c); }

行動規範の内容に同意します