0

私は比較的 Ja​​vaScript に不慣れで、新しいアプリケーションに取り組んでいます。4 つのドロップダウン選択の結果に基づいて、結果を発表するテキスト ボックスを計算して表示したいと思います。以下のコードを使用すると、html フォームで選択を行って「送信」ボタンを押すことができますが、結果が返されません。

プログラムフローを解釈するために画面に定期的な出力を取得する方法を理解していないため（document.writeが機能していないようです）、デバッグに苦労しています。js が実行されているかどうかさえわかりません...どうにかして HTML 内から js を呼び出す必要がありますか? js を外部ファイルに保存し、その外部ファイルを呼び出す必要がありますか?

ありがとう！

<html>
<head>
    <SCRIPT type="text\Javascript" EVENT="onclick">
    var valueCS ;
    var valueV ;
    var valueVCS ;
    var valueStorm ;
    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage ;
    var outageEnd ;

    document.write="total is "+finalValue;
    if(finalValue==0000) {startOutage="28"; outageEnd="1";} else
      (finalValue==0001) {startOutage="27"; outageEnd="1";} else
      (finalValue==1110) {startOutage="22"; outageEnd="4";} else
      (finalValue==1111) {startOutage="24"; outageEnd="4";} else
      document.write("Invalid entries")
    document.write("Start Outage: "+startOutage<br>"Outage End: "+outageEnd)
    </SCRIPT>
</head>
<body>
<form id = "outageSelector" method="post contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups">
    <fieldset>
        <legend><h1>Please choose the status of each system</h1></legend>
        <label>Is the contact server up?</label>
        <select id="contServer" name="contServer">
            <option valueCS=1000>Up</option>
            <option valueCS=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option valueV=100>Up</option>
            <option valueV=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option valueVCS=10>Up</option>
            <option valueVCS=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option valueStorm=1>Yes</option>
            <option valueStorm=0>No</option>
        </select><br>
        <input type="submit" name="submitServerStatus" value="View Outage Groups" />
    </fieldset>
</form>
</body>
</html>
4

4 に答える 4

1

あなたが抱えている問題は、フォームにあります。ドロップダウンはすべて同じ名前でした。また、値の形式が正しくありませんでした。

<form id="outageSelector" method="post" action="[SOME_DESTINATION]">
    <fieldset>
        <legend><h1>Please choose the status of each system</h1></legend>
        <label>Is the contact server up?</label>
        <select id="contServer" name="contServer">
            <option value=1000>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option value=100>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option value=10>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option value=1>Yes</option>
            <option value=0>No</option>
        </select><br>
        <input type="submit" name="submitServerStatus" value="View Outage Groups" />
    </fieldset>
</form>

これは、舞台裏で POST とともに送信されます。

contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups

編集:これは改訂された js 関数です。

<script>
  function checkValues(){
    var e;
    e = document.getElementById("contServer");
    var valueCS = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("vistaServer");
    var valueV = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("vistaCSServer");
    var valueVCS = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("storm");
    var valueStorm = parseInt(e.options[e.selectedIndex].value);

    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage = -1;
    var outageEnd = -1;        

    if(finalValue == 0) {
      startOutage = "28";
      outageEnd = "1";
    } else if (finalValue == 1) {
      startOutage = "27";
      outageEnd = "1";
    } else if (finalValue == 1110) {
      startOutage = "22";
      outageEnd = "4";
    } else if (finalValue == 1111) {
      startOutage = "24";
      outageEnd = "4";
    }

    var msg = "total: " + finalValue;        
    if(startOutage == -1){
      msg += " | Start Outage: " + startOutage + " | Outage End: " + outageEnd;
    }else{
      msg += " | Invalid entries";
    }

    alert(msg);
  }
</script>

使用するには、フォームを変更する必要があります。

<form id="outageSelector" method="post" action="" onsubmit="checkValues()"> ...
于 2012-05-17T16:21:21.730 に答える
1

画面に出力を取得するconsole.logには、Firebug、Chrome 開発ツール、または IE 開発ツールと一緒に使用する必要があります。HTML5、JavaScript、および CSS デバッガーは 1 つだけですか?を参照してください。

コードの明らかな問題の 1 つは、

 if(finalValue=1110)

あるべきです（比較のために二重に等しい）

if(finalValue==1110)

しかし、別の問題があります。ゼロで始まる数値は 8 進数です。あれは

010 == 8 // true

あなたはビットマスクを求めているようです

var mask = 0;
var flagA = 1, flagB = 2, flagC = 4;

// Add flagA and flagB to the mask
mask = mask | flagA; // or mask |= flagA
mask |= flagB;

// Now you can test which flags are on using bit testing

// is flagA set?
console.log(mask & flagA) // truthy value
// is flagC set?
console.log(mask & flagC) // false (0)

https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators

于 2012-05-17T15:42:53.467 に答える
1

まったく使用しないでください。document.writeただし、DOM操作です。これらの 紹介を読んでください。

また、イベント駆動型プログラミングについても学ぶ必要があります。domevents ( intro )が必要ですが、サーバーへの非同期通信もイベントベースです。<SCRIPT type="text\Javascript" EVENT="onclick">それが機能する方法ではありません:-)

于 2012-05-17T15:52:18.773 に答える
0

Juan はすでに console.log を提供していますが、これは非常に便利で、おそらく最高のものです。Firebug、Chrome Dev、IE dev では、ブレーク ポイントを追加し、ローカル変数とグローバル変数を監視することもできます。

暗黒時代からのデバッグの古いスタイルには、使用alert("some string here");してポップアップを取得するか、ページにデバッグ要素を追加してから、

document.getElementById("debugElement").innerHTML("some string here");
于 2012-05-17T15:47:52.480 に答える