我的函数没有在点击时运行，显示未定义

Question

我的函数没有运行 click，当我检查 chrome 的控制台时它显示未定义。但是，它是在零件中定义的。

这是一个成绩检查网站，我构建了不同的功能来检查成绩，我想要这个大功能，包含所有小功能，这个大功能将在点击提交按钮时运行。

我期望的内部 HTML<p>可以更改为他们的等级，显示背书和 UE 信用状态，也错过了总学分。

Answer 1

在里面添加函数window.onload = function () {  // here code};

Answer 2

因此，您可以做很多事情来改进代码。我将在这里做两件事——首先，发布一些稍微改进的代码，然后提供一些关于如何改进你自己的JavaScript. 凉爽的？更新的代码const values = {};&nbsp;function doItAll() {&nbsp; &nbsp; for (let i = 1; i <= 8; i++) {&nbsp; &nbsp; &nbsp; &nbsp; const UE = document.getElementById(`UECHECK${i}`).checked;&nbsp; &nbsp; &nbsp; &nbsp; const GRA = document.getElementById(`GRADE${i}`).value;&nbsp; &nbsp; &nbsp; &nbsp; const CRE = document.getElementById(`CREDITS${i}`);&nbsp; &nbsp; &nbsp; &nbsp; const grades = ['A', 'M', 'E'];&nbsp; &nbsp; &nbsp; &nbsp; if (UE === true || grades.some(GRA)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[`UEAPPCRE${i}`] = CRE;&nbsp; &nbsp; &nbsp; &nbsp; } else if (UE === false || grades.some(GRA)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[`UEAPPCRE${i}`] = 0;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[`UEAPPCRE${i}`] = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[`CRE${i}`] = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[`Missed${i}`] = CRE;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function testingItOut() {&nbsp; &nbsp; const uECheckP = document.getElementById("UECheckP");&nbsp; &nbsp; const totalCre = document.getElementById('TotalCre');&nbsp; &nbsp; const totalMiss = document.getElementById('TotalMiss');&nbsp; &nbsp; let totalUE = 0;&nbsp; &nbsp; let totalCredits = 0;&nbsp; &nbsp; let totalMissed = 0;&nbsp; &nbsp; for (let i = 1; i <= 8; i++) {&nbsp; &nbsp; &nbsp; &nbsp; totalUE += values[`UEAPPCRE${i}`];&nbsp; &nbsp; &nbsp; &nbsp; totalCredits += values[`CRE${i}`];&nbsp; &nbsp; &nbsp; &nbsp; totalMissed += values[`Missed${i}`];&nbsp; &nbsp; }&nbsp; &nbsp; uECheckP.innerHTML = `Passed: ${totalUE >= 14&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ? 'You have passed the university entrence of this subject.'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; : (totalUE >= 100 || totalUE < 0)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ? 'Please check your input of credits.'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; : 'You have not passed the university entrence of this subject.'}`;&nbsp; &nbsp; totalCre.innerHTML = `Credits: ${totalCredits > 0&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ? `You have gained ${totalCredits} credits in this subject.`&nbsp; &nbsp; &nbsp; &nbsp; : 'Please check your input of credits.'}`;&nbsp; &nbsp; totalMiss.innerHTML = `Missed: ${totalMissed > 0&nbsp; &nbsp; &nbsp; &nbsp; ? `You have missed ${totalMissed} credits in this subject.`&nbsp; &nbsp; &nbsp; &nbsp; : 'Please check your input of credits.'}`;}&nbsp; &nbsp; function TheBigFunction() {&nbsp; &nbsp; &nbsp; &nbsp; if (document.readyState === 'complete') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doItAll();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testingItOut();&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('error').innerHTML = "The document hasn't finished loading!";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }因此，首先，您在使用var关键字的原始代码中掌握了全局变量。我建议研究 ES6 语法（特别是let和const）scope、 和context。尽量远离var声明。在更新后的代码中，您将看到我使用 ES6 模板字面量来动态引用values对象变量，该对象变量“包含”具有您原始代码使用的基本上所有变量的值的属性。还要注意循环的使用——您有八个广泛的元素和变量类别，因此不必将每一个都写出来，我已经展示了如何动态引用它们。我还建议多看看你的逻辑（特别是doItAll函数）。通常，JavaScript变量是使用 构造的camelCase，所以也看看它。遵循此约定将使您的代码更具可读性，尤其是当您要在 SO 上发布时。并且，至少在您的 HTML 中，请注意 ID 和类之类的内容倾向于遵循该kebab-case样式。我知道，样式太多了——当然，没有什么是 100% 的，但大多数开发人员和公司倾向于坚持这些约定。整个过程中都存在语法错误——你大写了document大约 10 次左右，并且在随后document.getElementById的左括号之前跟随几个s 和一个句点。小心那里！就作用域而言，函数内声明的变量不能在函数外访问，至少不能直接访问。因此，在您的UECreCheck函数中，您声明了大约 24 个变量，然后尝试在其余函数中直接进一步访问它们的值。这些情况下的值将是undefined，这没有帮助。最后，虽然不是完全必要（取决于您的用例），但我添加了一个检查TheBigFunction- 如果您的用户（或您）TheBigFunction在文档加载之前调用，各种基于 DOM 的变量分配基本上不会“看到" 页面上的任何内容，因此您必须确保在引用 DOM 之前检查内容是否已经ready或之后loaded。同样要回答您的原始问题，请尽量不要使用 HTML 属性，例如onclick. 相反，在您的 HTML 文件中，删除onclick属性和函数调用，并将其添加到您的functions.js文件中：window.onload = () => {&nbsp; &nbsp; document.getElementById('the-button').addEventListener('click', e => {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; TheBigFunction();&nbsp; &nbsp; });};我下来查找有关此进一步参与-这里的例子是不是最好的任何手段，但它表明你如何能简化代码，更新你的语法，等