javascript - 在函数中时不附加表数据

Question

每当我迭代地编写代码时，程序都会按预期运行，但是当我像这样放置在一个函数中时，它就会中断。

function create_tableElements() { 
    Let myArticle = document.createElement(‘tr’); 
    Let rank = document.createElement(‘td’); 
}

function assign_tableElements() {     
    Let count = 1 
    rank1 = count;
    rank.textContent = rank1;                 
    heroes_name.textContent = heroes[i].name;     
}


function append_tableElements() { 
    myArticle.appendChild(rank);
    myArticle.appendChild(heroes_name); 
}

有谁知道为什么会这样？有没有办法让我在函数内调用函数？我正在使用 for 循环遍历 JSON。现在，如果我不放置在函数中而只编写代码，它将运行得很好。只是致力于提高可读性，并更好地组织我的代码

Answer 1

您粘贴的代码有几个问题(Let 而不是 let 或花哨的单引号)。

我假设您的手机或您使用的任何工具已更正它。假设这是您的代码:

function create_tableElements() { 
    let myArticle = document.createElement('tr'); 
    let rank = document.createElement('td'); 
}

function assign_tableElements() { 
    let count = 1;
    rank1 = count; 
    rank.textContent = rank1; 
    heroes_name.textContent = heroes[i].name; 
}

function append_tableElements() { 
    myArticle.appendChild(rank);
    myArticle.appendChild(heroes_name); 
}

您的代码无法运行，因为:

• rank 变量是 create_tableElements 函数的局部变量，不能被 append_tableElements 函数访问
• 同样适用于 heroes_name 函数，它是 assign_tableElements 函数的局部

您可以通过以下方式解决此问题:

• 在任何函数之外将这些变量声明为全局变量。不过，这并不是真正的最佳做法。
• 更改函数的定义，以便它们可以访问相同的局部变量:您真的需要一个函数来创建元素，另一个函数将它们附加到 DOM 吗？
• 您还可以使用立即调用的函数表达式。

(function() {
	// these variables will be visible to all the functions defined in this function, but won't be global : 
	let rank, myArticle, heroes_name;

	function create_tableElements() { 
		myArticle = document.createElement('tr'); 
		rank = document.createElement('td'); 
	}

	function assign_tableElements() { 
		let count = 1;
		rank1 = count; 
		rank.textContent = rank1; 
		heroes_name.textContent = heroes[i].name; 
	}

	function append_tableElements() { 
		myArticle.appendChild(rank);
		myArticle.appendChild(heroes_name); 
	}
  
 	// invoking your functions : 
	create_tableElements();
	assign_tableElements();
	append_tableElements();
})();