Streamline application.js exampleModal code (#30819)

* use `textContent` since we only need to add text
* move comments

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 9d0c684b727798977b3173a74ebaa77a0c401af1..51dc20d42d16535dbc61a83dc4d73ba8b1a076c7 100644 (file)
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -66,14 +66,16 @@
   var exampleModal = document.getElementById('exampleModal')
   if (exampleModal) {
     exampleModal.addEventListener('show.bs.modal', function (event) {
-      var button = event.relatedTarget // Button that triggered the modal
-      var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
+      // Button that triggered the modal
+      var button = event.relatedTarget
+      // Extract info from data-* attributes
+      var recipient = button.getAttribute('data-whatever')
 
       // Update the modal's content.
       var modalTitle = exampleModal.querySelector('.modal-title')
       var modalBodyInput = exampleModal.querySelector('.modal-body input')
 
-      modalTitle.innerHTML = 'New message to ' + recipient
+      modalTitle.textContent = 'New message to ' + recipient
       modalBodyInput.value = recipient
     })
   }

diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index ece511ca2fe6dca81ab6c6b40d3c8d504f28f4f5..e42c104c51635cbc8bbcdfae9c9e2a55642ef29a 100644 (file)
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -547,8 +547,11 @@ exampleModal.addEventListener('show.bs.modal', function (event) {
   // and then do the updating in a callback.
   //
   // Update the modal's content.
-  exampleModal.querySelector('.modal-title').textContent = 'New message to ' + recipient
-  exampleModal.querySelector('.modal-body input').value = recipient
+  var modalTitle = exampleModal.querySelector('.modal-title')
+  var modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+  modalTitle.textContent = 'New message to ' + recipient
+  modalBodyInput.value = recipient
 })
 {{< /highlight >}}