-3

Working on a very basic available space calculator for work. People enter in the dimensions for the room, aisle and stage widths, etc and it should return how many sections of how many square feet are available. Not a big JavaScript programmer but everything seems to look right. I have been using the W3 Schools compiler to quickly see changes as I make them but when I put anything inside the final If Else statement the compiler just outputs "Error" and if opened in a browser the Submit button does nothing.

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.";
    }
}

Here is the form the function is pulling its information from:

<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>

The part that is not working is this if statement:

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.";
}

Here is the script for centerExists. It is right under the caclulate() in the head:

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 回答