-3

仕事のための非常に基本的な利用可能なスペース計算機に取り組んでいます。部屋、通路、ステージの幅などの寸法を入力すると、利用可能な平方フィートのセクション数が返されます。大した JavaScript プログラマーではありませんが、すべてが正しいように見えます。私は W3 Schools コンパイラを使用して変更をすばやく確認していますが、最終的な If Else ステートメント内に何かを配置すると、コンパイラは「エラー」を出力するだけで、ブラウザで開いた場合、[送信] ボタンは何もしません。

function calculate() {
    "use strict";
    var finalLength, finalWidth, sections, finalSquare, sectionsSize, room;
    room = document.getElementById('room');
    finalLength = room.length.value - room.depth.value - room.backstage.value - room.front.value;
    finalWidth = room.width.value - room.side.value - (room.centerCount.value * room.center.value);
    sections = 1 + room.centerCount.value;
    finalSquare = finalLength * finalWidth;
    sectionsSize = finalSquare / sections;

    if (sections == '1') {
        document.getElementById("demo").innerHTML = "Your room is " + finalSquare + " square feet.";
    } else if (sections == '2' || sections == '3' || sections == '4') {
        document.getElementById("demo").innerHTML = "Your room is going to have " + sections + " sections that are " + sectionsSize + " square feet.";
    }
}

関数が情報を取得するフォームは次のとおりです。

<form id="room">
    Length of Room(Front to Back): <input type="text" name="roomLength" id="length"/><br/>
    Width of Room: <input type="text" name="roomWidth" id="width"/><br/>
    Depth of Stage: <input type="text" name="stageDepth" id="depth"/><br/>
    Depth of Backstage: <input type="text" name="backstageDepth" id="backstage"/><br/>
    Space between stage and first row: <input type="text" name="frontWalk" id="front"/><br/>
    Width of Side Aisle: <select name="sideIsles" id="side">
        <option value=6 selected>3</option>
        <option value=8>4</option>
        <option value=10>5</option>
    </select><br/>
    How many Center Aisle: <select name="centerIsleCount" id="centerCount" onchange='centerExists(this.value);'>
        <option value="0" selected>0</option>
        <option value=1>1</option>
        <option value=2>2</option>
        <option value=3>3</option>
    </select><br/>
    <div id="centerExists" style='display:none;'>
        Width of Center Aisle: <select name="centerIsle" id="center">
            <option value=4 selected>4</option>
            <option value=5>5</option>
            <option value=6>6</option>
        </select><br/>
    </div>
    <p id="demo">Please enter the above information.</p>
    <button type="button" onclick="calculate()">Submit</button>
</form>

機能していない部分は、次の if ステートメントです。

if (sections == '1') {
    document.getElementById("demo").innerHTML = "Your room is " + finalSquare + " square feet.";
} else if (sections == '2' || sections == '3' || sections == '4') {
    document.getElementById("demo").innerHTML = "Your room is going to have " + sections + " sections that are " + sectionsSize + " square feet.";
}

これが centerExists のスクリプトです。ヘッドの caclulate() のすぐ下にあります。

function centerExists(val) {
    "use strict";
    var element = document.getElementById('centerExists');
    if (val !== '0') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}
4

1 に答える 1

3

数値に文字列を足すと、予想とは異なる結果になるからです。

sections = 1 + room.centerCount.value;

値がゼロの場合は、"10"

使用する

sections = 1 + parseInt(room.centerCount.value, 10);

if/else if では、数値と比較する必要があります。

于 2013-10-28T17:36:14.650 に答える