変数の値に応じてhtml内のある部分の文書を書き換えたい

JavaScript初心者です。
簡単なアドベンチャーゲームを作りたいのですがうまくいきません。
最初の画面id="00"で「郵便箱を開ける」をクリックすると違う画面id="03"に行きます。そこで「HIT HERE」をクリックすると末尾のopen_mailbox()関数を実行してmailboxを1にします。ここまではおそらく意図通りに動いているように思えます。問題は以降です。
再度id="03"の画面に行くとmailboxが1であれば別のテキストを出したいのですが、それが出ずに0としてのテキストが出ます。
またid="02"の画面ではmailboxが1か0かで異なるテキストを出したいのですが、どちらのテキストも出ません。
どうすればmailboxが1の場合のテキストを出せますでしょうか？

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>ペラ１ゾーク（偽物）</title>
6<style type="text/css">
7*
8{
9	background-color: #000000;
10	color: #ffffff;
11	font-size: 20px;
12	line-height:25px;
13}
14
15.box0
16{
17	width: 640px;
18	margin: 0 auto;
19}
20
21.box1
22{
23	width: 640px;
24	height: 2000px;
25	margin: 0 auto;
26}
27
28.dousuru
29{
30	display: block;
31	float: left;
32	width: 86px;
33	height: 48px;
34	margin: 2px;
35	padding: 5px;
36	border: 1px solid #ffffff;
37	text-align: center;
38	overflow:hidden;
39}
40
41li
42{
43	list-style-type:none;
44}
45
46a
47{
48	text-decoration: none;
49
50}
51</style>
52<!-- <script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script> -->
53<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
54<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
55<script>
56$(document).ready(function() {
57$('a').smoothScroll();
58});
59</script>
60</head>
61<body>
62<script>
63var mailbox;
64mailbox = 0;
65
66</script>
67<div class="box0">
68ペラ１ゾーク（偽物）： 大地底帝国<br>
69<br>
70ようこそゾーク（偽物）の世界へ！
71あなたはどれだけ多くの宝物を持ってこの世界から脱出できるかな？<br>
72<br>
73ゲームの進行に応じてページが下のほうへスクロールして行きます。一番下がエンディングです。開始早々いきなり一番下までスクロールしないようにしましょう。<br>
74<br>
75＊ ＧＡＭＥ ＳＴＡＲＴ ＊<br>
76<br>
77<br>
78<br>
79</div>
80
81<div class="box1" id="00">
82あなたは今、白い家の南の野原に立っています。正面に白い家があります。<br>
83ここには小さな郵便箱があります。<br>
84あなたは北を向いています。<br>
85<br>
86&gt;<br>
87<br>
88<a href="#01"><span class="dousuru">家を見る</span></a>
89<a href="#02"><span class="dousuru">手紙を<br>取る</span></a>
90<a href="#03"><span class="dousuru">郵便箱を<br>開ける</span></a>
91<a href="#04"><span class="dousuru">北に行く</span></a>
92</div>
93
94<div class="box1" id="01">
95丸い形の不思議な家です。壁はやわらかそうで、モコモコしています。<br>
96<br>
97&gt;<br>
98<br>
99<a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
100</div>
101
102<div class="box1" id="02">
103<script>
104if (mailbox === 0)
105{
106	document.write ('手紙？ そんなものは見当たりませんよ。\n');
107} else
108{
109	document.write ('あなたは手紙を取りました。\n
110	手紙にはこうかいてあります。\n
111	「ひとの手紙を勝手に読むのはどうかと思う。」\n
112	あなたは郵便箱にそっと手紙をしまいました。\n');
113}
114</script>
115<br>
116&gt;<br>
117<br>
118<a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
119</div>
120
121<div class="box1" id="03">
122<script>
123if (mailbox === 0)
124{
125	document.write ('郵便箱を開けたら中に手紙がありました。\n');
126} else
127{
128	document.write ('郵便箱はすでに開いています。');
129}
130</script>
131<br>
132&gt;<br>
133<br>
134<a href="#00" onclick="open_mailbox(mailbox);"><span class="dousuru">HIT<br>HERE</span></a>
135</div>
136
137<div class="box1" id="04">
138家の前に来ました。<br>
139ここには玄関があります。<br>
140<br>
141&gt;<br>
142<br>
143<a href="#"><span class="dousuru">玄関を開ける</span></a>
144<a href="#"><span class="dousuru">辺りを見る</span></a>
145<a href="#00"><span class="dousuru">南に行く</span></a>
146</div>
147
148<script>
149function open_mailbox (mailbox)
150{
151mailbox = 1;
152}
153</script>
154
155</body>
156</html>
157コード

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

回答3件

ベストアンサー

**問題点1：**変数に複数行を入れている

JavaScript
1// ここ
2    document.write ('あなたは手紙を取りました。\n
3    手紙にはこうかいてあります。\n
4    「ひとの手紙を勝手に読むのはどうかと思う。」\n
5    あなたは郵便箱にそっと手紙をしまいました。\n');
6```下記ページを参照。
7
8【JavaScriptで変数に代入するテキストを複数行にする方法まとめ - みかづきブログ その3】
9[http://kimizuka.hatenablog.com/entry/2014/09/12/095957](http://kimizuka.hatenablog.com/entry/2014/09/12/095957)
10
11---
12
13**問題点2：**if の実行タイミングがわかっておられない
14
15今の書き方をされていると if はページを開いた際に1回だけ実行される。そのため必ず「mailbox === 0」が選ばれる。
16```JavaScript
17if (mailbox === 0)

**問題点3：**動作については問題ないが document.write は非推奨になる流れです

【HTML5でdocument.writeが非推奨であるならば | WEB制作システム-ホームページ制作・システム開発・SEO/SEM対策からWEBデザインまで】
http://labo-of.com/?p=1542

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]】
http://web.antenna.work/innerhtml/

とりあえずざっとみた所を指摘しました。
多分、クリックした際にjQueryで書き換え（追記：hidekichiさんのバージョン7以降参照）が手早いとは思いますが、スクロールで先が見えてしまう構造なのでそこから考えたほうが良いと思います。

投稿2016/06/12 03:29

編集2016/06/12 05:15

kei344

総合スコア69643

hideki0227

2016/06/12 05:30

ありがとうございます。そもそも代入の時に改行しちゃいけないんですね。知りませんでした。ifの位置とdocument.writeを見直し、プレイヤーが行動を選択した時だけ条件分岐とinnerHTMLでのテキストの書き換えをする様にしたら、意図通りの動きになりました。この先もこの考え方で進めてみます。作り始めでこれらのことを伺えて本当によかったです。

hideki0227

2016/06/12 05:34

追記：手動スクロールでネタバレする仕様なのは、ご愛敬の範囲かと思ってます。いくつもフラグを立てないとエンディングは出ない様にもしますので。この点もご指摘ありがとうございます。

kei344

2016/06/12 05:52

スライダー系プラグインとか利用したり、下記の様な全画面系スライドを利用するなどするのも手かな、と思ったので。あと、要素（テキスト＆選択肢）を最初に作るのではなく、選択肢のクリック後に生成すると見られることはないし、同じような動きを実現できると思います。【Jquery fullContent.js】（全画面系スライド例） http://www.zehfernandes.com/jquery.fullContent/

hideki0227

2016/06/12 08:19

いろんなものがあるんですね。さっそく試してみます。重ねてありがとうございます。

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

すいません、問題点は見てないんですが、色々手を加えました。

jsFiddle

アップデートしました。9
(気がついた所だけ直しておきました)

あんまりお見せするようなソースではないですけれども、何となしにこんな感じで行けたような気がするんですけれども。javascriptは一部しか使ってなくて、ほぼjQueryなんですけどね。

何かしらプラグインを読み込んでおられるのでjQueryはいけるんだと思いました。
まぁそのプラグインの分も中に仕込みましたけれども。

mailboxの件はflagと言うクラスを任意のIdに入れることでやりました。

投稿2016/06/12 02:25

編集2016/06/12 06:13

hidekichi

総合スコア368

hideki0227

2016/06/12 05:31

ありがとうございます。ぼかしとか震えとか、いろいろできるんですね。ちょっと私にはまだ難しい世界でしたが、参考にさせて頂きます。

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

以下のように、open_mailboxメソッドの引数を消せば動くと思います。

js
1function open_mailbox ()
2{
3mailbox = 1;
4}

「mailboxが1の場合のテキストが出ない」理由は、グローバル変数mailboxを判定している処理の段階で、グローバル変数mailboxの値が0だからです。ブラウザのデバッグ機能を使って、実際に確認してみてください。

で、引数を消すと動く理由ですが、まずJavaScriptはprimitive型については値渡しです。
http://qiita.com/mozisan/items/1b9d4bf5a1bb341dd354

引数がある状態では、変数mailboxはグローバル変数でなく、引数の方を指しています。
で、引数に1を代入していますが、値渡しのため呼び出し元のグローバル変数mailboxの値は変わりません。

引数を消した状態では、変数mailboxはグローバル変数を指していて、グローバル変数に1を代入しています。
だから、mailboxの判定処理では1になり、動くはずです。

投稿2016/06/12 02:04

yuji38kwmt

総合スコア437

hideki0227

2016/06/12 05:32

なるほど、そういうことになるんですね。おっしゃる通りに引数を消して、動いています。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問