Tengo un botón que, dependiendo de si la entrada de texto que activa está abierta o no, cambia entre 'Informar un problema' y 'Cerrar'. En un esfuerzo por consolidar mi código, decidí usar Handlebars.JS para crear lo siguiente:

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

He seguido los ejemplos en la documentación y, como puede ver en el Javascript que adjuntaré a continuación, tengo un interruptor en funcionamiento en togggleReportForm, cuya consola registra verdadero y falso con cada clic. No estoy seguro de lo que me estoy perdiendo aquí y agradecería cualquier consejo.

Actualmente, el botón solo muestra 'Cerrar' sin mensajes de error.

 var report_form_opened = report_form_opened; $(document).ready(function() { const client = ZAFClient.init(); $("#myBtnToReportABug").click(() => collapse.collapse('toggle')); $("#bugForm").submit((e) => { e.preventDefault() const input = document.getElementById('nameInput'); bugInfo = { "name": "Report From " + idTicket, "story_type" : "Bug", "description": input.value + " " + `${data.ticket.brand.url}/agent/tickets/${idTicket}`, } reportBug(bugInfo).then(collapse.collapse('toggle')) }) }); }); }); async function reportBug(data = {}) { const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories' const response = await fetch(url, { method: 'POST', headers: { "X-TrackerToken": `${metadata.settings.token}`, "Content-Type": "application/json" }, body: JSON.stringify(data) }); return response.json(); } // changes text on 'report problem' button when form open function toggleReportForm() { report_form_opened = !report_form_opened; console.log(toggleReportForm) } // clears text field onclick function clearFields() { document.getElementById("nameInput").value = ""; }