JavaScript 逻辑没有贯彻到底

Question

我有这个用 JavaScript 编写的计算器，但逻辑没有按照正确的方式进行。我不知道是什么打破了流程。问题是 rollRepeatCal 变量设置为 6，但我的“< 4”逻辑正在执行。我开始认为这里有一个更大的问题。

这是我的值(value)观:

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