JavaScriptのcheck関数とupdate関数について

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8">
        <script>
            function update() {//ココ
                var a = document.getElementById("a").chacked;
                var b = document.getElementById("b").chacked;
                var c = document.getElementById("c").chacked;
                document.getElementById("r0").textContent =(a && b && c);
                document.getElementById("r1").textContent =(a || b || c);
            }
        </script>
    </head>
    <body>
        <h2>AND/ORテスト</h2>
        A:<input id="a" type="checkbox" onchange="update()" />//ココ
        B:<input id="b" type="checkbox" onchange="update()" />//ココ
        C:<input id="c" type="checkbox" onchange="update()" />//ココ> 
        <p>
            A && B && C => <span id="r0"></span><br />
            A || B || C => <span id="r1"></span><br />
        </p>
    </body>
  </html>
```

###気になったこと
上のコードはANDとORのテストをするコードです。ここではupdate関数を使ったいるのですが、check関数でもいけるのではないかと思って、ソースにココと書いてあるところ(update)をcheckに変更して実行してみたところ、無事に実行できました。
update関数はcheck関数で代用できるのでしょうか？update関数とcheck関数の何が違うのかよく分からないので、初心者の私でもわかるように教えてください。お願いします<m(__)m>



###試したこと
ココと書いてあるところ(update)をcheckに変更して実行してみた

###補足情報(言語/FW/ツール等のバージョンなど)
使用ツール：visual studio Code

kei344

2016/09/21 14:24

update関数が定義されていませんが、どの箇所で定義されているのでしょうか。

tsukasakagawa

2016/09/21 14:36

ごめんなさい。確認したところ、何箇所か間違えていました。すいません。

kei344

2016/09/21 14:44

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。また、「update関数とcheck関数の何が違うのか」というのであれば、それぞれの定義部分を提示ください。

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

回答2件

JavaScript
1function check() {

ここの定義している関数名と、

HTML
1A:<input id="a" type="checkbox" onchange="update()" />//ココ

ここのonchangeで呼ぶ関数の名前が一致していなければ、動作しません。これは名前がupdateかcheckかということではなく、両者が一致しているかどうかです。

ですから、提示されたそのままのソースの状態では、両者は一致していませんので、updateなんて関数は無い、とエラーになって終わりです。以下、改変せずそのままコピペで実行した結果です。

IE11
'update' は定義されていません。

Firefox
ReferenceError: update is not defined

Chrome
Uncaught ReferenceError: update is not defined

次に、上に挙げた2つの名前が一致して、無事関数が実行されたとして、

JavaScript
1var a = document.getElementById("a").update;
2var b = document.getElementById("b").update;
3var c = document.getElementById("c").update;

この3つはundefinedとなります。updateをcheckと書き換えても同じです。

なぜなら、a、b、cの3つはこのソースではinput要素を参照しますが、input要素はそのようなプロパティを持っていないからです。

3つともundefinedとなるので、(a && b && c)も(a || b || c)も毎回undefinedです。

環境が書かれていませんが、手元で試してみたところ、textContentにundefinedを渡した場合、IE11はそのままundefinedと表示され、FirefoxとChromeは何も表示されませんでした。

いずれにせよ、これが目的の動作とは到底思えませんので、「無事に実行できました」というのが信じられないのですが…。

恐らくですが、

JavaScript
1var a = document.getElementById("a").checked;
2var b = document.getElementById("b").checked;
3var c = document.getElementById("c").checked;

こうすべきなのではないでしょうか？

チェックボックスやラジオボタンがチェックされたかどうかを調べるには、checkedというプロパティを使います。チェックされていればtrue、されていなければfalseが得られます。名前はあくまでもcheckedであり、checkでもupdateでもありません。

以下、動作を確認した全体版を転機します。

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