JavaScript-логика не соответствует

Question

У меня этот калькулятор в JavaScript, и логика не соответствует правильному пути. Я не могу сказать, что нарушает поток. Проблема в том, что переменная rollRepeatCal установлена ​​на 6, но моя логика для «< 4» выполняется. Я начинаю думать, что здесь есть большая проблема.

Вот мои значения:

<div class="ProductProperties"> 
    <div class="PropertiesList"> 
     <asp:Panel ID="pnlProperties" runat="server"> 
      <h3><asp:Label ID="lblProductProperties" runat="server" Text="Product Properties" /></h3> 
      <strong><a href="wallpaper-properties.aspx" target="blank"><font color="#FF0000">What are these?</font></a></strong><br /> 
      <strong>Material:</strong> <asp:Label ID="lblMaterial" runat="server" /><br /> 
      <strong>Paste:</strong> <asp:Label ID="lblPaste" runat="server" /><br /> 
      <strong>Repeat: </strong><label id="lblRepeat" type="number">6</label><br /> 
      <strong>Match: </strong><asp:Label ID="lblMatch" runat="server" /><br /> 
      <strong>Roll Width: </strong><label id="lblRollWidth" type="number">20.5</label><br /> 
      <asp:Label id="divSRL" runat="server"><strong>Single Roll Length: </strong><label id="lblSingleRollLength" type="number">16.5</label><br /> 
      <strong>Single Roll Coverage: </strong><label id="lblSingleRollCoverage" type="number">28 square feet</label><br /> 
      <strong>Single Roll MSRP: </strong>$<asp:Label ID="lblMSRP" runat="server" /><br /> 
      <strong>Washability: </strong><asp:Label ID="lblWashability" runat="server" /><br /> 
      <strong>Removability: </strong><asp:Label ID="lblRemovability" runat="server" /><br /> 
     </asp:Panel> 
    </div> 
</div> 

Мой HTML:

<p><strong>Calculate how much to buy: </strong><label id="output"></label></p> 
<table><tr><td id="Wall" align="right"></td></tr> 
<tr> 
<td><strong>Wall Width: </strong>(ft)</td><td><input type="text" id="wallWidth" width="40px" value=""></td> 
</tr> 
<tr> 
<td><strong>Wall Height: </strong>(ft)</td><td><input type="text" id="wallHeight" width="40px" value=""></td> 
</tr> 
</table> 
<a href="javascript: void(0)" onClick="wallpapercalc()"><button>Calculate</button></a> 

Тогда у меня JavaScript:

<script> 

    function wallpapercalc(){ 

     var widthInput = +document.getElementById('wallWidth').value, 
     heightInput = +document.getElementById('wallHeight').value, 
     rollWidthCal = +document.getElementById('lblRollWidth').innerText.replace('"', ' '), 
     rollLengthCal = +document.getElementById('lblSingleRollLength').innerText.replace("'", " "), 
     rollRepeatCal = +document.getElementById('lblRepeat').value;  


      if (rollWidthCal > 15) 
      { 
       if (rollRepeatCal = < 4) 
       { 
        var repeat10 = ((((rollWidthCal/12)*rollLengthCal) * 2)) - 
        ((((rollWidthCal/12)*rollLengthCal) * 2)) * .10; 
        var result = (widthInput * heightInput)/repeat10; 

         if (result <= 1) 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " roll 10 of wallpaper"; 
         } 
         else 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " rolls 10 of wallpaper"; 
         } 
       } 
       else if (rollRepeatCal > 3 && rollRepeatCal < 13) 
       { 
        var repeat20 = ((((rollWidthCal/12)*rollLengthCal) * 2)) - 
        ((((rollWidthCal/12)*rollLengthCal) * 2)) * .20; 
        var result = (widthInput * heightInput)/repeat20; 
        if (result <= 1) 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " roll 20 of wallpaper"; 
         } 
         else 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " rolls 20of wallpaper"; 
         } 

       } 
       else 
       { 
        var repeat30 = ((((rollWidthCal/12)*rollLengthCal) * 2)) - 
        ((((rollWidthCal/12)*rollLengthCal) * 2)) * .30; 
        var result = (widthInput * heightInput)/repeat30; 
        if (result <= 1) 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " roll 30 of wallpaper"; 
         } 
         else 
         { 
          document.getElementById('output').innerText = 
          Math.ceil(result) + " rolls 30 of wallpaper"; 
         } 

       } 

      } 
      else 
      { 
       var borderResult = (widthInput/rollLengthCal); 
       document.getElementById('output').innerText = Math.ceil(borderResult) + " rolls of border wallpaper"; 

      } 
    } 


</script> 

Answer 1

Проблема заключается в этой строке кода:

rollRepeatCal = +document.getElementById('lblRepeat').value; 

lblRepeat - это ярлык, поэтому он не имеет атрибута value. Если вы измените эту строку, так что читает innerText вместо (как вы делаете с lblRollWidth или lblSingleRollLength), он должен работать снова:

rollRepeatCal = +document.getElementById('lblRepeat').innerText; 

Вы можете увидеть на этом JSFiddle: http://jsfiddle.net/q0wcpjhk/1/