javascriptで反転スイッチを作りました。

スイッチを押すと、true・falseが入れ替わります。
試しに、alertで文字を表示させてみて、それぞれちゃんとスイッチが切り替わっているのを書くにできたのですが trueと、falseのときに、それぞれ別のURLに飛ばしたいのですが
うまいきません。 (URLの後に?をつけてオプションを切り替えたい)
原因を教えて下さい。

以下はサンプルコード
//フラグ入れ替え
flag1 = false;
function toggle(){
flag1 = !flag1;
document.getElementById("switch").value = flag1;
if(flag1 == true){location.href='index.html?1'};
if(flag1 == false){location.href='index.html?2'};
}

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/08/31 12:34:17
  • 終了:2015/09/07 12:35:04

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4523ベストアンサー獲得回数18792015/08/31 13:04:51

この javascript が書かれているのが index.html なのですよね?
location.href を入れ替えるとページを再読み込みします。
javascript は、もう一度 先頭から解釈されて

flag1 = false;

この処理も実行されます。

  1. index.html を読み込む
  2. flag1 は false
  3. ボタンを押す
  4. toggle 関数が呼ばれて flag1 が反転し、flag1 は true になる
  5. location.href に 'index.html?1' が代入され、index.html が再表示される
  6. javascript が、また解釈されるので flag1 は false になる

という感じになってます。
ページが遷移する前のことは、覚えていられないんです。

flag1 が true で表示されたか、false で表示されたかは URL の末尾が "?1" か "?2" かで判定できます。
この部分は location.search で取得できます。

元のコードをなるべくそのままにして、期待通りの動作をするようにしたのがこちらです。


flag1 = location.search == "?1";    // ★パラメータから、呼び出し元の flag1 を判断する

//フラグ入れ替え
function toggle(){
    flag1 = !flag1;
    document.getElementById("switch").value = flag1;
    if(flag1 == true){location.href='aah.html?1'};
    if(flag1 == false){location.href='aah.html?2'};
} 

id="switch" の要素は、flag1 の値が入ってる、という想定でしょうか。
上記のままだと、切り替えボタンを押さないと値が入りません。
後、論理型の変数の値を調べるのに、false と比較するのは気持ち悪い、とか思ったりします。

あまり変わってませんが、こんな感じになるかと。


var flag1 = location.search == "?1";    // ★パラメータから、呼び出し元の flag1 を判断する
window.onload = function() {
    document.getElementById("switch").value = flag1;
};

//フラグ入れ替え
function toggle(){
    flag1 = !flag1;
    document.getElementById("switch").value = flag1;
    if (flag1) {
        location.href='aah.html?1';
    } else {
        location.href='aah.html?2';
    };
} 




追記です。

回答のコメントで聞かれていることは、二つの課題があります。

  1. 画面の読み直しをせずに、ボタンの内容を書き換えたい
  2. 画面の再読み込みをしても、前の状態を反映させたい

まず、ひとつめの課題。
2回目の質問のときに、配列の内容をボタンとして表示することはできていました。
これの応用です。
あのときは、何もないところにボタンを追加していましたが、書き換えるときには、一旦 ボタンを消してからボタンを追加すれば良いんです。
日本語と英語の切り替えも含めて、こんな感じになります。

<script>
function displayButton(labelArray) {
    var dest = document.getElementById("button-area");

    // clear button
    dest.innerHTML = "";

    // draw button
    for (var i = 0 ; i < labelArray.length ; ++i) {
        var b = document.createElement("button");
        b.id = "word_option_" + i;
        b.innerHTML = labelArray[i];
        dest.appendChild(b);
    }
}

var isEnglish = false;
var englishArray = ["car" , "apple", "box", "dinner", "eagle", "fox"];
var japaneseArray = ["自動車" , "りんご", "箱", "夕食", "鷹", "狐"];
var answerArray = isEnglish ? englishArray : japaneseArray;

window.onload = function() {
    displayButton(answerArray);
};

function toggle() {
    isEnglish = ! isEnglish;
    answerArray = isEnglish ? englishArray : japaneseArray;
    displayButton(answerArray);
}

</script>

<body>
<div id="button-area"></div>
<button onclick="toggle()">切り替え</button>
</body>



次。ふたつ目の課題です。
ページの reload をしても前の値を使いたいときがあります。
例えば、前にログインしていた状態を覚えておくとか。

そういうときに使うのは cookie(クッキー)です。

さっきのコードで、英語かどうかの初期値をソースに埋め込むのではなくて、cookie から読みだすようにしたのが以下のコードです。

<script>
function displayButton(labelArray) {
    var dest = document.getElementById("button-area");

    // clear button
    dest.innerHTML = "";

    // draw button
    for (var i = 0 ; i < labelArray.length ; ++i) {
        var b = document.createElement("button");
        b.id = "word_option_" + i;
        b.innerHTML = labelArray[i];
        dest.appendChild(b);
    }
}

// ★cookie に保存
function saveMode(mode) {
    document.cookie = "isEnglish=" + (mode ? "Yes" : "No");
}

// ★cookie から読み出し
function loadMode() {
    var mode = false;   // cookie に保存されてなかったら、日本語モード
    var matches = /isEnglish=(Yes|No)/.exec(document.cookie);
    if (matches) {
        mode = matches[1] == "Yes";
    }
    return mode;
}

var isEnglish = loadMode(); // ★cookie から初期値を取得
var englishArray = ["car" , "apple", "box", "dinner", "eagle", "fox"];
var japaneseArray = ["自動車" , "りんご", "箱", "夕食", "鷹", "狐"];
var answerArray = isEnglish ? englishArray : japaneseArray;

window.onload = function() {
    displayButton(answerArray);
};

function toggle() {
    isEnglish = ! isEnglish;
    saveMode(isEnglish);    // ★cookie に保存しておく
    answerArray = isEnglish ? englishArray : japaneseArray;
    displayButton(answerArray);
}

</script>

<body>
<div id="button-area"></div>
<button onclick="toggle()">切り替え</button>
</body>


cookie に関するリファレンスです。気が向いたら読んでみてください。
document.cookie - Web API インターフェイス | MDN

他6件のコメントを見る
id:a-kuma3

長い文章は、回答のコメントだとプレビューがなくて辛いので、回答に追記しました。

質問ばかりで申し訳ありません。

Q & A サイトなのですから、質問者は質問するのが普通です :-)

2015/09/02 11:55:30
id:kajironpu

ありがとうございます。なんとかうまくいきました。
クッキーははじめて使いました。じっくり勉強したいと思います。
最終的には、ボタンの書き換えは行わず、クッキーを読み込んでenglisharray とjapanesearrayをフラグ判定してquestionとanswerarrayにそれぞれを分けました。そしてトグルを押したときに、一度reloadさせて再度データを読み込ませ成功。
ただ、ボタンにランダムに単語をいれたあとに、なぜかボタンを押したときの解答と一致しない問題が発生し、かなりはまりましたが、結局クッキーにデータが保存されて、配列がバラバラになったままだったのが問題のようでしたので、フラグがtrue/falseで区別して、毎回新しいデータを読み込むようにしたら無事成功しました。自分でやっているうちに、どんどん複雑になり、途中何がなんだかわからなくなりましたが、おかげ様とても勉強になりました。どうもありがとうございました。

2015/09/02 17:18:22

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません