使用对象调试 Javascript 中的推送方法

Question

我是 js 的初学者，有一个项目要在一天结束前完成。我必须显示一个添加了临时工的数组，并设置一个对象来保存这个数组。我的问题是消息不会显示并且 for 语句不会递增。当通过 var i 和 count 时返回未定义。我知道此代码中缺少很多内容，但此时我已尝试对其进行流线化，以便我可以调试此问题。我稍后会处理的日期。

这是我的代码：

var temps = [];

function process() {
    'use strict';

    var lowTemp = document.getElementById('lowTemp').value;
    var highTemp = document.getElementById('highTemp').value;

    var output = document.getElementById('output');
    var inputDate = (new Date()).getTime();

    var temp = {
        inputDate : inputDate,
        lowTemp : lowTemp,
        highTemp : highTemp
    };

    var message = '';

    if (lowTemp == null) {
        alert ('Please enter a Low Temperature!');
        window.location.href = "temps.html";
    } else if (highTemp == null) {
        alert ('Please enter a High Temperature!');
        window.location.href = "temps.html";
    } else {
        lowTemp = parseFloat(lowTemp, 10);
        highTemp = parseFloat(highTemp, 10);
    }


    if (temp.value) {
        temps.push(temp.inputDate, temp.lowTemp, temp.highTemp)
        var message = '<h2>Temperature</h2><ol>';
        for (var i = 0, count = temps.length; i < count; i++) {
            message += '<li>' + temps[i] + '</li>'
        }   
        message += '</ol>';
            output.innnerHTML = message;
        }

    return false;
}

function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = process;
}

window.onload = init;


Here is my new code:

    var temps = [];

    function process() {
        'use strict';

        var lowTemp = document.getElementById('lowTemp').value;
        var highTemp = document.getElementById('highTemp').value;

        var output = document.getElementById('output');
        var inputDate = (new Date()).getTime();

        var temp = {
            inputDate : inputDate,
            lowTemp : lowTemp,
            highTemp : highTemp
        };

        var message = '';

        if (lowTemp == null) {
            alert ('Please enter a Low Temperature!');
            window.location.href = "temps.html";
        } else if (highTemp == null) {
            alert ('Please enter a High Temperature!');
            window.location.href = "temps.html";
        } else {
            lowTemp = parseFloat(lowTemp, 10);
            highTemp = parseFloat(highTemp, 10);
        }


        if (temp.value) {
            temps.push(temp.inputDate, temp.lowTemp, temp.highTemp)
            var message = '<h2>Temperature</h2><ol>';
            for (var i = 0, count = temps.length; i < count; i++) {
                message += '<li>' + temps[i] + '</li>'
            }   
            message += '</ol>';
                output.innnerHTML = message;
            }

        return false;
    }

    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = process;
    }

    window.onload = init;

Answer 1

您的代码存在一些大问题：

您永远不应该将任何东西直接与 NaN 进行比较。正确的比较应该是：
```
if (isNaN(lowTemp)) {
```
您在不需要时使用花括号。您应该删除两个花括号：
```
{window.location.href = "temps.html";}
```
函数parseFloat expects only one parameter: the string to be converted. You're probably confusing it to parseInt需要转换的字符串和基数。
你用的是temp的属性value，但是你从来没有设置过，所以，你检查它是否存在的条件将始终 return false，而您要调试的 push 方法永远不会被调用，因为它在 if 语句中。
最后，您在最后关闭了一个 li 标签，但您从未打开过它。您可能应该关闭开始时打开的 ol 标签。

你的其余代码对我来说似乎还不错。

谈到调试，你应该阅读 Google Chrome's Debugging Javascript Tutorial。

使用对象调试 Javascript 中的推送方法

Debugging a push method in Javascript with an object

javascript

methods

push

object