链接两个 JavaScript 文件以在 HTML 页面上协同工作答案

【问题标题】：Link two JavaScript files to work together on top of an HTML page链接两个 JavaScript 文件以在 HTML 页面上协同工作
【发布时间】：2020-10-03 13:11:01
【问题描述】：

我的编程课有作业，要求我使用 JS 类。最重要的是，我必须使用 HTML，并且必须在单独的 .js 文件中定义类。我已经完成了所有的工作，如果类是在同一个 .js 文件上定义的，它运行正常，但是一旦我将代码粘贴到不同的文件上，它就会停止工作。我已经尝试在主文件中导入类，但我可以让它工作（我尝试了不同的导入代码，因为我在谷歌上找到了这个问题的不同答案但没有人工作，这就是我在这里问的原因）。我相信这可能是因为我在导入时做错了什么，但我就是找不到错误。

【问题讨论】：

请分享所有相关代码...
抱歉延迟回答。我找到了解决方案，所以我会发布一个显示代码的答案。

标签： javascript html class import

【解决方案1】：

虽然您的代码有效，但将 js 文件放在 HTML 的顶部会延迟页面的加载时间。在家庭作业等简单场景中，无需担心，但在大型项目中，它变得至关重要。

通过阅读您的代码，它会在所有页面都已加载时开始，因此无需将其放在头部。

【讨论】：

感谢您的建议！我们刚开始在我的大学学习编码，我们的教授已经教我们在顶部编写脚本部分。感谢您分享您的知识！

【解决方案2】：

您是否尝试过这样做：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="first.js"></script>
    <script src="second.js"></script>

    <p>Hello World!</p>
</body>
</html>

【讨论】：

我做了，不是那样，我还是找到了问题，所以我会发布一个答案。

【解决方案3】：

首先，我将分享一些代码。这是我的 HTML 头：

<head>
    <meta charset="utf-8">
    <title>Obligatorio1</title>
    <link rel="stylesheet" href="css/estilos.css">

    <script src="js/funciones.js"></script>
    <script src="js/clases.js"></script>


</head>

这是我在第一个 JS 上的相关代码：

window.addEventListener('load',inicio)

function inicio(){
    document.getElementById("botonAgregarPersonas").addEventListener("click",registroPersonas);
}

let personas=[];

function registroPersonas(){
    let nombre=document.getElementById("nombrePersonas").value.trim();
    let seccion=document.getElementById("seccionPersonas").value;
    let mail=document.getElementById("emailPersonas").value.trim();

    let esta=false;
    for (i=0;i<personas.length&&!esta;i++){ 
        if (nombre==personas[i].nombre) {
            esta=true;
        }
    }

    if (esta){
        alert("Nombre ya ingresado");
    }else {
        let Per = new Persona (nombre, seccion, mail);
        personas.push(Per);
        let texto=Per.nombre+" - Sección: "+Per.seccion+" - "+Per.mail;
        agregarElementoEnLista(texto);
        agregarEnComboCompras(Per.nombre);
        agregarCheckboxes(Per.nombre);
    }
}



function agregarElementoEnLista (texto){
    let nodoLi=document.createElement("LI");
    let nodoTexto=document.createTextNode(texto);
    nodoLi.appendChild(nodoTexto);
    document.getElementById("lista").appendChild(nodoLi);

这是我的第二个 JS 文件（有类的那个）的代码：

class Persona{
    constructor(nombre, seccion, mail){
        this.nombre=nombre;
        this.seccion=seccion;
        this.mail=mail;
    }
}

我会开始说，虽然我发现了问题，但我不明白为什么会发生。

好的，正如您在最后一段代码中看到的那样，参数与类属性具有相同的名称。如果我尝试在第一个 JS 文件上复制代码，它会毫无问题地工作，但是一旦我在单独的 JS 文件上使用该代码，它就会停止工作。在接触了代码的每一部分之后，我最终更改了参数名称，使其与类属性不同，现在看起来像这样：

class Persona{
    constructor(_nombre, _seccion, _mail){
        this.nombre=_nombre;
        this.seccion=_seccion;
        this.mail=_mail;
    }
}

那里的代码运行良好，无需更改其余文件的任何内容（第一个 JS 文件和 HTML 文件都没有）。

如果有人比我更了解为什么会发生这种情况，请随时编辑此答案。

感谢大家的帮助！

【讨论】：