寻找逻辑来解决“TypeError：无法读取未定义的属性（读取'innerHTML'）”可能的空错误

Question

我有一个函数，可以读取在 HTML 中创建的所有表格，并导出一个干净的 .xls 文件，其中包含创建的所有表格（每个表格之间有一个空格以适应风格）。第一次执行时提示如下。

"TypeError: Cannot read properties of undefined (reading 'innerHTML')"

我无法检索详细的调试，因为这是在受保护的 IIS 服务器上发生的，并且仅配备了 F11 功能和 .btn，单击它后不起作用。第一直觉是，由于某种原因，以下代码可能会遇到空事件。

scope.exportToScv = function(){
    var csvTitle = document.getElementsByTagName('title')[0].innerHTML.split(" - ")[1].replace(/\s/g, '');
    var options = { hour12: false };
    var str = ((new Date()).toLocaleString('en-US', options)).replace(/\s/g, "T").replace(/\//g,'').replace(/:/g,'');
    csvTitle = 'Failed' + csvTitle + '.csv';
    var csv = '';
    var ths = document.getElementsByTagName('th');
    for(var i=0; i<ths.length; i++) {
        var kLink = ths[i].getElementsByClassName("k-link")[0];
        if(i === ths.length-1)
            csv += kLink.innerHTML.split('<')[0] + '\r\n';
        else
            csv += kLink.innerHTML.split('<')[0] + ',';
    }
    var trs = document.getElementsByTagName('tr');
    for(var j=0; j < trs.length; j++) {
        if((trs[j].getAttribute("role") == "row").valueOf() && (trs[j].parentNode.tagName == "TBODY").valueOf()){                                   
            for(var k=0; k < trs[j].childNodes.length; k++) {
                if(k === 0)
                    csv += (trs[j]).childNodes[k].childNodes[0].innerHTML + ',';
                else if(k === trs[j].childNodes.length-1)
                    csv += (trs[j]).childNodes[k].innerHTML + '\r\n';
                else if(k === trs[j].childNodes.length-2)
                    csv += (trs[j]).childNodes[k].innerHTML.replace("&gt;",">") + ',';
                else
                    csv += (trs[j]).childNodes[k].innerHTML + ',';
            }
        }
    };

按钮代码（可能不相关，但会启动调用范围）

<!-- <div style="color: white"> Export To CSV </div> -->
<!-- <label class="switch"> -->
<button type="submit" class="btn export" value="ExportToCsv" ng-model="config.Enabled" ng-click="exportToScv()">Export To CSV</button>
<!-- <span class="slider round"></span> -->
<!-- </label> -->

尝试想出一种简单干净的方法来解决这个可能的 if-Else 逻辑，而不必重写整个事情。谢谢大家。

Answer 1

此类问题通常与访问尚不存在的元素的属性有关。 我建议您在访问innerHtml 属性之前添加一个条件。由于您无法访问详细的调试信息，因此了解哪个元素返回未定义会很有帮助。

这条线可以帮助你。

var csvTitle = csvTitleElement ? document.getElementsByTagName('title')[0].innerHTML.split(" - ")[1].replace(/\s/g, '') : '';