0

ユーザーが選択する必要がある2つのドロップダウンメニューを備えたフォームを作成しようとしています.2つのドロップダウンメニューからの選択に応じて、2つのドロップダウンメニューからの選択に応じてWebページにリダイレクトされます. if ステートメントで動作しますが、よりクリーンな方法を使用しようとしています。case ステートメントを使用しようとしましたが、機能しません。

私はまだJavaScriptに慣れていないことを心に留めておいてください

これが私が今までやったことです：

           <form>
 <p> Type of Terrain: </p>

  <select id="type">
    <option value="0" id="Select">Select</option>
    <option value="1" id="Street_Park">Street/Park</option>
    <option value="2" id="Dirt">Dirt</option>
    <option value="3" id="Racing">Racing</option>
    </select>

    <p>Body Height</p>
    <select id="height">
    <option value="0" id="Select">Select</option>
    <option value="1" id="5ft">4ft</option>
    <option value="2" id="5.5ft">4.25ft</option>
    <option value="3" id="5.5ft">4.50ft</option>
    <option value="4" id="6ft">4.75ft</option>
    <option value="5" id="5ft">5ft</option>
    <option value="6" id="5.5ft">5.25ft</option>
    <option value="7" id="6ft">5.50ft</option>
    <option value="8" id="5ft">5.75ft</option>
    <option value="9" id="5.5ft">6ft</option>
    <option value="10" id="6ft">6.25ft</option>
    </select>

    <br /><br />

    <input  onclick="goToPage();"  type="button" value="Submit" />

    </form>

<script type="text/javascript">

function goToPage()
{
  var type = document.getElementById("type").value;
  var height = document.getElementById("height").value;

  switch ("type" && "height"){

    case type == 1 && height == 1 :

    window.location = "http://www.maltabmx.com/About.html"
    Break;

    case type == 1 && height == 2 :

    window.location = "http://www.maltabmx.com/Footage.html"
    Break;



  }
}
</script>
4

2 に答える 2

0

switchとの使用に問題があることをカップルしてくださいcase：

switchは単一の式を評価するためcaseのものであり、考慮されるそれぞれは、分析された式の結果のためである必要があります。

2つの変数を見ているので、if/else ifはおそらくよりクリーンになります。

if (type==1 && height==1) { window.location = "http://www.maltabmx.com/About.html"; }
else if (type==1 && height==2) { window.location = "http://www.maltabmx.com/Footage.html"; }

とはいえ、それでも使用したい場合は使用switchできますが、相互にネストする必要があります。過度に冗長であるため、これはお勧めしませんが、オプションを理解するのに役立つ例をここに含めてください。

switch (type) {
    case 1:
        switch (height) {
            case 1:
                window.location = "http://www.maltabmx.com/About.html";
            break;
            case 2:
                window.location = "http://www.maltabmx.com/Footage.html";
            break;
        }
    break;
    // other options...
    default:
        alert("You must select a type.");
    break;
}

回答コメントを読んだ後、以下を追加しました。

非常に多くの組み合わせがあるため、//とifステートメントelse ifの組み合わせを使用してそれらを整理できます。リンクの数が多いので、それでもコードのチャンクになりますが、少なくとも少しすっきりしているように見えます。elseswitch

var targetURL;
if (type==0) {
    switch (height) {
        case 1: targetURL = "http://www.maltabmx.com/About.html";
        case 2: targetURL = "http://www.maltabmx.com/Footage.html";
        /* and so on... */
    }
} else if (type==1) {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
} else if (type==2) {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
} else {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
}
targetURL ? window.location.href = targetURL : alert("Please choose a height.");

あなたはまだjavascriptに精通しているとおっしゃっていたので、先に進んで、追加したサンプルコードの他のいくつかの部分について説明します。あなたがすでに知っていることを私が調べてしまったら、お詫びします。

HTMLからは、typeには常に値があるように見えるので、if/else ifチャンクをelse if (type==3)で終わらせるのでelseはなく、typeが0、1、または2でない場合は、3でなければならないので使用しますif。else (if)ステートメントの最後にキャッチオールがあるので、たとえエンディングelseが何かがうまくいかなかったと言っているだけであっても、スクリプトは常に何かを実行します。そうすれば、ユーザーはそこに座って何かが起こるのではないかと考えません。switchケースの後にafterを指定することにより、ステートメント内で同じことを行うことができdefaultます。

また、が使用されるすべての行でtargetURL使用する代わりに、と呼ばれる変数を使用しました。私が行ったように（ " "）のように変数が値なしで初期化されると、値はになります。スクリプトの最後に、targetURLがtrueであるかどうかを評価する簡潔なコードがあります。そうでない場合は、高さを選択するためのアラートが表示されます。javascriptでは、変数の値がまたはでない限り、変数はtrueを返します。window.locationcasevar targetURL;falsefalse0

（これはブール値のfalseであり、文字列「false」ではないことに注意してください。var targetURL = "false";引用符を付けるとtrueが返されます！）

私はそれを行ったので、window.location40回入力する必要がなく、エラー処理（height何らかの理由で値がなかった場合）を4つではなく1つの場所に配置できます。

そして、その点については、先ほど説明した簡潔な構文に慣れるために、次のようにします。

targetURL ? window.location.href = targetURL : alert("Please choose a height.");

...と同等です：

if (targetURL) {
    window.location.href = targetURL;
} else {
    alert("Please choose a height.");
}

そうすれば、簡単なif/else評価をより簡潔にすることができます。

お役に立てれば！

于 2012-07-12T19:39:17.947 に答える
0

あなたの switch ステートメントの構文は少しずれています - 使用法は次のようになります:

switch (type){

  case "1":

    window.location = "http://www.maltabmx.com/About.html"
    break;

  case "2" :

    window.location = "http://www.maltabmx.com/Footage.html"
    break;
}

switch() ステートメント内の式の値を選択したい場所。したがって、switch(height)各「ケース」ステートメントは、「高さ」変数の可能な値である必要があるとしますcase "20":。

複数の条件で論理的な決定を下そうとしている場合は、'if/else if' ステートメントを使用するので、次のようにすることをお勧めします。

if(type == "1" && height == "1"){

   window.location = "http://www.maltabmx.com/About.html"
}
else if(type == "1" && height == "2"){

   window.location = "http://www.maltabmx.com/Footage.html"
}

スイッチの代わりに。これが役立つことを願っています。

于 2012-07-12T19:20:30.773 に答える