如果我添加任何內容到If語句無效

Question

使用非常基本的可用空間計算器進行工作。人們輸入房間，過道和舞臺寬度等尺寸，並且它應該返回多少平方英尺可用的區域。不是一個大的JavaScript程序員，但一切看起來都很正確。我一直在使用W3 Schools編譯器來快速查看更改，但是當我在最終的If Else語句中放入任何內容時，編譯器只輸出「Error」，如果在瀏覽器中打開，Submit按鈕將不執行任何操作。

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腳本。它正好在頭腦的下方（）：

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如果你需要比較數字。