Question

使用非常基本的可用空间计算器进行工作。人们进入房间，过道和舞台宽度等的尺寸，它应该返回多少平方英尺可用的部分。不是一个很大的JavaScript程序员，但似乎一切看起来都很正确。我一直在使用W3 Schools编译器快速查看更改，但是当我在最终的If Else语句中放入任何内容时，编译器只输出“Error”，如果在浏览器中打开，则“提交”按钮不执行任何操作。

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语句：

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';
    }
}

Answer 1

因为数字加上一个字符串会产生与你期望的不同的东西。

sections = 1 + room.centerCount.value;

如果值为零，则等于"10"

使用

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

并在你的if / else中，你需要与数字进行比较。

如果我在If语句中添加任何内容都无效

1 个答案: