一个 JavaScript 函数禁用其他函数

One javascript function disables other functions

本文关键字：函数 其他 一个 JavaScript      更新时间：2023-09-26

我有 3 个函数：

window.onload = function() {       
    canvas();   
    changeColor();
    blockSize();    
}

问题出在第三个"blockSize（）"上。当我把它放在 window.onlod 函数的底部时，它没有运行;+ 当我将其放在顶部时，它会禁用其下方的所有功能。这是代码（以类名"size"的所有块的百分比计算宽度和高度）：

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i in block) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}

请注意，当我附加Child（最后一行）时，该问题就适用了。当我删除它时，其他功能可以正常工作。还尝试将手动放入div中，并改用此javascript行（相同的结果）：

block[i].firstChild.innerHTML = width+"x"+height+"%";

!!当我只使用innerHTML时，一切正常。我明白，我可以使用这样的东西，它会起作用：

block[i].innerHTML = "<span>"+width+"x"+height+"</span>";

问题很可能来自在 HTML 上不正确地使用for-in。这将包括 DOM 元素以外的其他项目。

当它遇到block[i].appendChild(span)时，如果block[i]不是元素，因此没有.appendChild()方法，它将抛出错误。

请改用for循环。

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i = 0; i < block.length; i++) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}
相关文章：