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

Question

javelover

40

0もっと見る

ウェブ制作

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回まで

登録：2015/08/31 12:34:17
終了：2015/09/07 12:35:04

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2015-08-31T13:04:51+09:00

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

flag1 = false;

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

index.html を読み込む
flag1 は false
ボタンを押す
toggle 関数が呼ばれて flag1 が反転し、flag1 は true になる
location.href に 'index.html?1' が代入され、index.html が再表示される
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';
    };
}

追記です。

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

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

まず、ひとつめの課題。
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

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

ベストアンサー

a-kuma3497321542015/08/31 13:04:51

コメント（0件)

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