基于Vanilla JS的哈佛引用工具：多作者格式适配问题求助

我用原生JavaScript开发了一款哈佛引用生成工具，用户输入书籍/文章信息后，脚本会生成符合哈佛格式的引用。目前单作者功能正常，但添加“新增作者”按钮后，新增作者的输出无法匹配哈佛格式——预期输出是(Person, F. Person, S)，当前输出不符合要求。

核心问题代码 #

function addContributor(name) {
  const newLabel = document.createElement("label");
  const input = document.createElement("input");

  form.insertBefore(newLabel, contributeButton);

  if (name === "last") {
    newLabel.innerHTML = "Last Name(s): ";
    form.insertBefore(input, contributeButton);
  }
  if (name === "first") {
    newLabel.innerHTML = "First Name(s): ";
    form.insertBefore(input, contributeButton);
  }
  contributors.push({
    lastNameInput: input,
    firstNameInput: input,
  });
}

// Add contributor buttons and labels
contributeButton.addEventListener("click", () => {
  addContributor("first");
  addContributor("last");
});

// Get, format, and print values of fields into a bib. reference
function printBibRef() {
  const citationComponents = [];

  if (lastName.value) {
    citationComponents.push("(" + lastName.value + ", ");
  }

  if (firstName.value) {
    citationComponents.push(firstName.value[0] + ". ");
  }

  contributors.forEach((contributor) => {
    if (contributor.lastNameInput && contributor.lastNameInput.value) {
      citationComponents.push(contributor.lastNameInput.value + ", ");
    }
    if (contributor.firstNameInput && contributor.firstNameInput.value) {
      citationComponents.push(contributor.firstNameInput.value[0] + ". ");
    }
  });
}

问题根源 #

1. 输入框绑定错误：每次调用addContributor时，单个输入框同时被赋值给lastNameInput和firstNameInput，导致每个作者的姓、名指向同一个输入框，无法分别获取正确值。
2. 作者对象存储混乱：点击按钮时先后调用两次addContributor，会生成两个独立的作者对象，每个对象的两个属性都指向同一个输入框，数据完全错乱。
3. 格式拼接逻辑错误：当前代码把每个作者的姓、名分开追加，没有按照哈佛格式的「姓, 名首字母.」结构组合，也未处理多作者之间的空格分隔。

修复方案 #

1. 重构新增作者函数 #

每次新增作者时，同时创建姓、名两个输入框，作为完整的作者对象存入数组：

function addContributor() {
  // 创建姓的标签与输入框
  const lastNameLabel = document.createElement("label");
  lastNameLabel.innerHTML = "Last Name(s): ";
  const lastNameInput = document.createElement("input");
  
  // 创建名的标签与输入框
  const firstNameLabel = document.createElement("label");
  firstNameLabel.innerHTML = "First Name(s): ";
  const firstNameInput = document.createElement("input");
  
  // 插入到按钮前
  form.insertBefore(lastNameLabel, contributeButton);
  form.insertBefore(lastNameInput, contributeButton);
  form.insertBefore(firstNameLabel, contributeButton);
  form.insertBefore(firstNameInput, contributeButton);
  
  // 存入完整作者对象
  contributors.push({
    lastNameInput: lastNameInput,
    firstNameInput: firstNameInput,
  });
}

2. 修改按钮事件监听 #

直接调用重构后的函数，无需传递参数：

contributeButton.addEventListener("click", addContributor);

3. 修正格式拼接逻辑 #

按哈佛格式组合每个作者信息，处理多作者分隔并闭合括号：

function printBibRef() {
  const allAuthors = [];

  // 处理初始的第一个作者
  if (lastName.value && firstName.value) {
    allAuthors.push(`${lastName.value}, ${firstName.value[0]}.`);
  }

  // 处理所有新增作者
  contributors.forEach(contributor => {
    const lastName = contributor.lastNameInput?.value;
    const firstName = contributor.firstNameInput?.value;
    if (lastName && firstName) {
      allAuthors.push(`${lastName}, ${firstName[0]}.`);
    }
  });

  // 生成最终哈佛格式的作者部分
  const authorCitation = allAuthors.length > 0 ? `(${allAuthors.join(" ")})` : "";
  console.log(authorCitation);
  // 后续可继续拼接年份、标题等其他引用内容
}

内容的提问来源于stack exchange，提问作者Freddie Heath