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

Question

我的函数没有运行 click，当我检查 chrome 的控制台时它显示未定义。但是，它是在零件中定义的。这是一个成绩检查网站，我构建了不同的功能来检查成绩，我想要这个大功能，包含所有小功能，这个大功能将在点击提交按钮时运行。我期望的内部 HTML<p>可以更改为他们的等级，显示背书和 UE 信用状态，也错过了总学分。

Answer 1

在里面添加函数

window.onload = function () {

  // here code

};

Answer 2

因此，您可以做很多事情来改进代码。我将在这里做两件事——首先，发布一些稍微改进的代码，然后提供一些关于如何改进你自己的JavaScript. 凉爽的？

更新的代码

const values = {}; 

function doItAll() {

    for (let i = 1; i <= 8; i++) {

        const UE = document.getElementById(`UECHECK${i}`).checked;

        const GRA = document.getElementById(`GRADE${i}`).value;

        const CRE = document.getElementById(`CREDITS${i}`);

        const grades = ['A', 'M', 'E'];

        if (UE === true || grades.some(GRA)) {

            values[`UEAPPCRE${i}`] = CRE;

        } else if (UE === false || grades.some(GRA)) {

            values[`UEAPPCRE${i}`] = 0;

        } else {

            values[`UEAPPCRE${i}`] = 0;

            values[`CRE${i}`] = 0;

            values[`Missed${i}`] = CRE;

        }

    }

}

function testingItOut() {

    const uECheckP = document.getElementById("UECheckP");

    const totalCre = document.getElementById('TotalCre');

    const totalMiss = document.getElementById('TotalMiss');

    let totalUE = 0;

    let totalCredits = 0;

    let totalMissed = 0;

    for (let i = 1; i <= 8; i++) {

        totalUE += values[`UEAPPCRE${i}`];

        totalCredits += values[`CRE${i}`];

        totalMissed += values[`Missed${i}`];

    }

    uECheckP.innerHTML = `Passed: ${totalUE >= 14 

        ? 'You have passed the university entrence of this subject.' 

        : (totalUE >= 100 || totalUE < 0) 

        ? 'Please check your input of credits.' 

        : 'You have not passed the university entrence of this subject.'}`;

    totalCre.innerHTML = `Credits: ${totalCredits > 0 

        ? `You have gained ${totalCredits} credits in this subject.`

        : 'Please check your input of credits.'}`;

    totalMiss.innerHTML = `Missed: ${totalMissed > 0

        ? `You have missed ${totalMissed} credits in this subject.`

        : 'Please check your input of credits.'}`;

}

    function TheBigFunction() {

        if (document.readyState === 'complete') {

            doItAll();

            testingItOut();

        } else {

            document.getElementById('error').innerHTML = "The document hasn't finished loading!";

        }

    }

因此，首先，您在使用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 = () => {

    document.getElementById('the-button').addEventListener('click', e => {

        e.preventDefault();

        TheBigFunction();

    });

};

我下来查找有关此进一步参与-这里的例子是不是最好的任何手段，但它表明你如何能简化代码，更新你的语法，等