Question

当我点击按钮变量＆＃34; prod＆＃34;将NaN写入我的innerHTML。如果用户没有选择任何值，我需要用0替换NaN。我该如何添加此功能？

这是我正在使用的脚本：

<script>
function  doMath() {
var one = eval(document.theForm.elements[0].value)
var two = eval(document.theForm.elements[1].value)
var three = eval(document.theForm.elements[2].value)
var prod = one * two * three
 d.innerHTML = "<p>" + "Your Customer’s Life Time Value is:" + "</p>" + "<p>" + "$" + prod + ".00" + "</p>";
 if (isNaN(doMath)) 
     return 0;
}
</script>

这是我的HTML：

<form name="theForm">
<div>
    <div class="section-4-col-1">
        <div class="section-4-row-text">
            <p>Average Value of a Sale:<br><span style="font-size:12px;">(The average revenue of a single sale.)</span></p>
        </div>
        <div class="section-4-row-input">
            <input placeholder="$" type="text" class="section-4-input">
        </div>
    </div>
    <div class="section-4-col-2">
        <div class="section-4-row-text">
            <p>Average Number of Sales Annually:<br><span style="font-size:12px;">(The average number of times that your customers make purchases from you on an annual basis.)</span></p>
        </div>
        <div class="section-4-row-input">
            <!--<input placeholder="$" type="text" class="section-4-input">-->
            <select type="text" class="section-4-input">
            <option value="1">1</option>
            <option value="2">2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            </select>
        </div>
    </div>
    <div class="section-4-col-3">
        <div class="section-4-row-text">
            <p>Average Customer Retention (Years):<br><span style="font-size:12px;">(How long to your customers stay with you on average?)</span></p>
        </div>
        <div class="section-4-row-input">
            <!--<input placeholder="$" type="text" class="section-4-input">-->
            <select type="text" class="section-4-input">
            <option value="1">1</option>
            <option value="2">2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            </select>
        </div>
    </div>
</div>
<div class="section-4-calculation-button">
    <p><button id="calcbutton" type="button" class="section-4-button" onClick="doMath()">Calculate My Score</button></p>
</div>
<div id="d" class="section-4-calculation-result">
    <p>Your Customer’s Life Time Value is:</p>
    <p>$0.00</p>
</div>
</form>

Answer 1

假设允许使用十进制值，则丢失eval次来电！

var one = +document.theForm.elements[0].value || 0;

+符号将尝试将值转换为数字，如果值不是合法数字，则评估为NaN。如果找到，|| 0会将NaN转换为零。

如果只允许整数，请使用parseInt而不是+，并始终提供基数参数，以确保前导零不会导致无意中解析为八进制：

var one = parseInt(document.theForm.elements[0].value, 10) || 0;

Answer 2

function  doMath() { //No semicolons here...
var one = eval(document.theForm.elements[0].value) //Eval
var two = eval(document.theForm.elements[1].value)
var three = eval(document.theForm.elements[2].value)
var prod = one * two * three
 d.innerHTML = "<p>" + "Your Customer’s Life Time Value is:" + "</p>" + "<p>" + "$" + prod + ".00" + "</p>";
 if (isNaN(doMath)) //Use of innerHTML
     return 0;
}

你的代码严重搞砸了。始终使用分号。缩进。永远不要使用eval。永远不要使用innerHTML。

function doMath() {
    var one = parseInt(document.theForm.elements[0].value, 10); //second argument is base
    var two = parseInt(document.theForm.elements[1].value, 10);
    var three = parseInt(document.theForm.elements[2].value, 10);
    var prod = one * two * three || 0; //Here
    d.appendChild(document.createTextNode('Your Customer’s Life Time Value is $' + prod)); //<p> tags are for paragraphs
    if (isNaN(doMath))
        return 0;
}

MDN：parseInt，||，createTextNode，appendChild。

在我的innerHTML中将NaN替换为0

2 个答案: