質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,187

tsukasakagawa

score 13

<!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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/09/21 23:24

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

    キャンセル

  • tsukasakagawa

    2016/09/21 23:36

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

    キャンセル

  • kei344

    2016/09/21 23:44

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

    キャンセル

回答 2

+4

function check() {

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

A:<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つの名前が一致して、無事関数が実行されたとして、

var a = document.getElementById("a").update;
var b = document.getElementById("b").update;
var 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は何も表示されませんでした。

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


恐らくですが、

var a = document.getElementById("a").checked;
var b = document.getElementById("b").checked;
var c = document.getElementById("c").checked;

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function update() {
  var a = document.getElementById("a").checked;
  var b = document.getElementById("b").checked;
  var c = document.getElementById("c").checked;
  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 &amp;&amp; B &amp;&amp; C => <span id="r0"></span><br />
  A || B || C => <span id="r1"></span><br />
</p>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/21 23:38

    その通りです。間違いを正しく指摘してくださってありがとうございます<m(__)m>
    本来の質問とは関係ないところを指摘させてしまって申し訳ないです…

    キャンセル

checkベストアンサー

+2

むしろupdate()のままだと正常に動作しないと思います。

input要素のonchange属性は、その要素が変更された時に呼ばれる関数を指定するための属性です。
提示されたコードでは、onchange属性にupdate()が指定されていますが、update()は定義されていないので、意図した通りに動作しないのではないでしょうか。

また、getElementById()で取得しているinput要素は、updateプロパティを持っていないので、これも定義されていない旨のエラーが出ると思います。

[追記]
余計な御世話かもしれませんが、ドットインストールのJavaScript入門くらいは見ておいたほうがいいかもしれません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/23 22:07

    そもそも関数に対する解釈が間違っていました。すいません(>_<)
    その本を読ませて頂きます。回答してくださった皆様本当にすいませんm(_ _)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る