I have a text input box which does 3 things, it begins with the button 'Report A Bug' when it is closed, upon clicking it opens a text box & the Report A Bug button becomes 'Close'. I now want to combine the code from all JS below to work with with the following HTML Button, but I can't see a clear way to move forward on this. When I've tried my functionality has disappeared, or button simply no longer changes text.

Button 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>        </div>

JS:

 // changes text on 'report problem' button when form open
function change() {
  var theButton = document.getElementById("myBtnToReportABug");
  if (theButton.innerHTML == "Close")
    theButton.innerHTML = "Report A Problem";
  else
    theButton.innerHTML = "Close";
}

// clears text field onclick
function clearFields() {
  document.getElementById("nameInput").value = "";
}

// changes text on 'submit' back to original button text when report is made
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");
}