JavaScriptのオブジェクト

javascriptのオブジェクトについて質問です

JavaScript
1
2
3<!DOCTYPE html>
4
5<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
6<head>
7    <meta charset="utf-8" />
8    <script>
9        var car = {
10            color: "white",
11            speed: 80,
12            fuel:1000,
13            accelerate: function () {
14                this.speed += 20;
15            },
16            decelerate: function () {
17                this.speed -= 10;
18            },
19           
20        }
21        function acc() {
22            car.accelerate();
23            document.getElementById("speed").textContent = car.speed;
24        }
25        function dec() {
26            car.decelerate()
27            document.getElementById("speed").textContent = car.speed;
28        }
29    </script>
30</head>
31<body>
32    <button onclick="acc()">加速</button>
33    <button onclick="dec()">減速</button>
34    <p >車の速度は<span id="speed"></span></p>
35</body>
36</html>
37
38

⑴この文のdocument.getElementById("speed").textContent = car.speed
をdocument.getElementById("speed").textContent = speed
これにしたらなんでいけないんですか？

⑵あと車の速度はの部分を

車の速度はとするとなんでいけないかも教えてください。

kei344

2017/10/22 07:56

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

(1)ここで呼び出したいのは、carオブジェクトの中で定義したspeedですよね？
speedはcarオブジェクトのプロパティなので、アクセスするには「オブジェクト名.プロパティ名」というように呼び出さなければいけません。
詳しくはこのページを見てください。

(2)idは単にHTMLエレメントを区別するための名前にすぎないので、理論上はいけなくないです。
idを質問のように変えたうえで、acc()とdec()の中の処理をdocument.getElementById("car.speed").textContent = car.speedとすれば、正しく動きます。

ただしこうすると、carオブジェクトのspeedプロパティを呼び出すときの書き方とかぶってしまい、コードを読む人が混乱してしまいます。
変数やHTMLエレメントに名前をつけるときは、その名前を見ただけではっきり区別できるようにすべきです。

現状のコードも、carオブジェクトの中で定義したプロパティとエレメントの両方にspeedという名前をつけており、紛らわしいです。
例えばエレメントのidをcurrentSpeedなどに変えると、これからコードを読んだり書き足したりするときも、よりわかりやすくなると思います。

投稿2017/10/22 07:50

編集2017/10/22 11:44