如何清晰合并多段JS函数实现Bug上报按钮切换、表单清空功能

我开发了一款关联文本输入框的控件，初始关闭状态下按钮显示为「Report A Bug」，点击后打开文本输入框，按钮文字变为「Close」。我需要将现有JS代码的功能全部合并，适配已给出的HTML按钮，但目前尝试后要么功能完全失效，要么按钮文字不再切换，请问如何清晰合并多个函数保证功能正常运行？

现有HTML按钮代码 #

<button id="myBtnToReportABug" onclick="toggleReportForm()" type="button" class="btn btn-secondary float-right">{{#if report_form_closed }} Report A Problem {{else}} Close {{/if}}</button>

现有JS代码 #

// 表单打开时切换反馈按钮文字
function change() {
  var theButton = document.getElementById("myBtnToReportABug");
  if (theButton.innerHTML == "Close")
    theButton.innerHTML = "Report A Problem";
  else
    theButton.innerHTML = "Close";
}

// 点击时清空文本输入框
function clearFields() {
  document.getElementById("nameInput").value = "";
}

// 提交反馈后将按钮文字重置为初始状态
function changeSecond() {
  var theButton = document.getElementById("myBtnToReportABug");
  if (theButton.innerHTML == "Close")
    theButton.innerHTML = "Report A Problem";
}

function toggleReportForm() {
  var report_form_closed = document.getElementById("myBtnToReportABug");
}

原有代码的核心问题是toggleReportForm作为点击触发的主函数没有实际逻辑，多个功能函数分散没有联动，合并后的完整JS代码如下：

// 按钮点击主函数：切换表单显隐、按钮文字、清空输入
function toggleReportForm() {
  const reportBtn = document.getElementById("myBtnToReportABug");
  const reportForm = document.getElementById("reportForm"); // 替换为你实际的表单/输入框容器ID
  const nameInput = document.getElementById("nameInput");

  // 切换按钮文字
  if (reportBtn.innerText.trim() === "Close") {
    reportBtn.innerText = "Report A Problem";
    // 关闭表单时清空输入、隐藏表单
    nameInput.value = "";
    reportForm.style.display = "none";
  } else {
    reportBtn.innerText = "Close";
    // 打开表单时显示输入区域
    reportForm.style.display = "block";
  }
}

// 表单提交成功后调用，重置控件到初始状态
function onReportSubmitSuccess() {
  const reportBtn = document.getElementById("myBtnToReportABug");
  const reportForm = document.getElementById("reportForm");
  const nameInput = document.getElementById("nameInput");

  reportBtn.innerText = "Report A Problem";
  nameInput.value = "";
  reportForm.style.display = "none";
}

注意事项 #

• 将代码里的reportForm替换为你实际存储输入框的容器ID，对应显隐逻辑可根据你的UI需求调整
• 原有模板引擎的初始渲染逻辑无需修改，保持和JS逻辑一致即可
• 表单提交的回调逻辑里直接调用onReportSubmitSuccess即可实现提交后自动重置控件的需求

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