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

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

ただいまの
回答率

88.35%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,092

hideki0227

score 19

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ペラ1ゾーク(偽物)</title>
<style type="text/css">
*
{
    background-color: #000000;
    color: #ffffff;
    font-size: 20px;
    line-height:25px;
}

.box0
{
    width: 640px;
    margin: 0 auto;
}

.box1
{
    width: 640px;
    height: 2000px;
    margin: 0 auto;
}

.dousuru
{
    display: block;
    float: left;
    width: 86px;
    height: 48px;
    margin: 2px;
    padding: 5px;
    border: 1px solid #ffffff;
    text-align: center;
    overflow:hidden;
}

li
{
    list-style-type:none;
}

a
{
    text-decoration: none;

}
</style>
<!-- <script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('a').smoothScroll();
});
</script>
</head>
<body>
<script>
var mailbox;
mailbox = 0;

</script>
<div class="box0">
ペラ1ゾーク(偽物): 大地底帝国<br>
<br>
ようこそゾーク(偽物)の世界へ!
あなたはどれだけ多くの宝物を持ってこの世界から脱出できるかな?<br>
<br>
ゲームの進行に応じてページが下のほうへスクロールして行きます。一番下がエンディングです。開始早々いきなり一番下までスクロールしないようにしましょう。<br>
<br>
* GAME START *<br>
<br>
<br>
<br>
</div>

<div class="box1" id="00">
あなたは今、白い家の南の野原に立っています。正面に白い家があります。<br>
ここには小さな郵便箱があります。<br>
あなたは北を向いています。<br>
<br>
&gt;<br>
<br>
<a href="#01"><span class="dousuru">家を見る</span></a>
<a href="#02"><span class="dousuru">手紙を<br>取る</span></a>
<a href="#03"><span class="dousuru">郵便箱を<br>開ける</span></a>
<a href="#04"><span class="dousuru">北に行く</span></a>
</div>

<div class="box1" id="01">
丸い形の不思議な家です。壁はやわらかそうで、モコモコしています。<br>
<br>
&gt;<br>
<br>
<a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
</div>

<div class="box1" id="02">
<script>
if (mailbox === 0)
{
    document.write ('手紙? そんなものは見当たりませんよ。\n');
} else
{
    document.write ('あなたは手紙を取りました。\n
    手紙にはこうかいてあります。\n
    「ひとの手紙を勝手に読むのはどうかと思う。」\n
    あなたは郵便箱にそっと手紙をしまいました。\n');
}
</script>
<br>
&gt;<br>
<br>
<a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
</div>

<div class="box1" id="03">
<script>
if (mailbox === 0)
{
    document.write ('郵便箱を開けたら中に手紙がありました。\n');
} else
{
    document.write ('郵便箱はすでに開いています。');
}
</script>
<br>
&gt;<br>
<br>
<a href="#00" onclick="open_mailbox(mailbox);"><span class="dousuru">HIT<br>HERE</span></a>
</div>

<div class="box1" id="04">
家の前に来ました。<br>
ここには玄関があります。<br>
<br>
&gt;<br>
<br>
<a href="#"><span class="dousuru">玄関を開ける</span></a>
<a href="#"><span class="dousuru">辺りを見る</span></a>
<a href="#00"><span class="dousuru">南に行く</span></a>
</div>

<script>
function open_mailbox (mailbox)
{
mailbox = 1;
}
</script>

</body>
</html>
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

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

// ここ
    document.write ('あなたは手紙を取りました。\n
    手紙にはこうかいてあります。\n
    「ひとの手紙を勝手に読むのはどうかと思う。」\n
    あなたは郵便箱にそっと手紙をしまいました。\n');

下記ページを参照。

【JavaScriptで変数に代入するテキストを複数行にする方法まとめ - みかづきブログ その3】
http://kimizuka.hatenablog.com/entry/2014/09/12/095957


問題点2:if の実行タイミングがわかっておられない

今の書き方をされていると if はページを開いた際に1回だけ実行される。そのため必ず「mailbox === 0」が選ばれる。

if (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 14:30

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

    キャンセル

  • 2016/06/12 14:34

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

    キャンセル

  • 2016/06/12 14:52

    スライダー系プラグインとか利用したり、下記の様な全画面系スライドを利用するなどするのも手かな、と思ったので。あと、要素(テキスト&選択肢)を最初に作るのではなく、選択肢のクリック後に生成すると見られることはないし、同じような動きを実現できると思います。

    【Jquery fullContent.js】(全画面系スライド例)
    http://www.zehfernandes.com/jquery.fullContent/

    キャンセル

  • 2016/06/12 17:19

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

    キャンセル

+1

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

jsFiddle

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

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/12 14:31

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

    キャンセル

0

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

function open_mailbox ()
{
mailbox = 1;
}

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/12 14:32

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

    キャンセル

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

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

関連した質問

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