Question

我使用此example但进行了一些修改。我已经为我的应用程序添加了输入法，因此用户可以从本地pc中选择任何json文件并在页面上阅读，然后再选择一个文件进行比较，并在底部页面上查看结果。但我每次都会收到错误

document.getElementById(...).forEach is not a function

我做错了什么？在我的代码下面..并且没有fiddle错误：

app.controller("Main",function ($scope) {

    // ===== Start FileReader =====

    $scope.leftWindow = function readSingleLeftFile(e) {
        var file = e.target.files[0];
        if (!file) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
            var leftcontent = e.target.result;
            displayLeftContents(leftcontent);
        };
        reader.readAsText(file);
    };
    function displayLeftContents(leftcontent) {
        $scope.leftElement = document.getElementById('left-content');
        $scope.leftElement.innerHTML = leftcontent;
    }
    document.getElementById('left-input')
        .addEventListener('change', $scope.leftWindow, false);

    $scope.rightWindow = function readSingleRightFile(e) {
        var file = e.target.files[0];
        if (!file) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
            var rightcontent = e.target.result;
            displayRightContents(rightcontent)

        };
        reader.readAsText(file);
    };
    function displayRightContents(rightcontent) {
        $scope.rightElement = document.getElementById('right-content');
        $scope.rightElement.innerHTML = rightcontent;
    }
    document.getElementById('right-input')
        .addEventListener('change', $scope.rightWindow, false);

    // ===== End FileReader =====

    $scope.results = (function(){
        var leftInputIds = {};
        var rightInputIds = {};
        var result = [];

        document.getElementById('left-input').forEach(function (el, i) {
            leftInputIds[el.id] = document.getElementById('left-input')[i];
        });

        document.getElementById('right-input').forEach(function (el, i) {
            rightInputIds[el.id] = document.getElementById('right-input')[i];
        });

        for (var i in rightInputIds) {
            if (!leftInputIds.hasOwnProperty(i)) {
                result.push(rightInputIds[i]);
            }
        }
        return result;
    }());
});

和div

<section ng-show="dnd">
            <div class="content">
                <div class="row">
                    <div class="childGrid" style="display: flex">
                        <div style="width: 50%">
                            <input type="file" id="left-input"/>
                            <h3>Contents of the file:</h3>
                            <pre id="left-content"></pre>
                        </div>
                        <div style="width: 50%">
                            <input type="file" id="right-input"/>
                            <h3>Contents of the file:</h3>
                            <pre id="right-content"></pre>
                        </div>
                    </div>
                    <div class="parentGrid">
                        <div id="compare">
                            {{results|json}}
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

document.getElementById()返回单个对象而不是数组。

forEach需要odrer中的数组来操作它。

forEach方法没有为object定义，但它是为数组定义的。那么，这就是你收到错误的原因

document.getElementById(...).forEach is not a function

EDIT1：

这样做：

var leftInput =  document.getElementById('left-input')
leftInputIds[leftInput.id] = leftInput;
var rightInput =  document.getElementById('right-input')
rightInputIds[rightInput.id] = rightInput;

比较输入AngularJS

1 个答案: