chat page now uses classname instead of queryselector to extract user name

chatto/src/main/resources/static/js/chat.js

@@ -70,7 +70,8 @@ for (let i = 0; i < userBoxes.length; i++) {
             passphrase = elem.value;
             elem.hidden = true;
         }
-        let userName = this.querySelectorAll('span')[1].innerText;
+        console.log(this.getElementsByClassName('to-user-span'));
+        let userName = this.getElementsByClassName('to-user-span')[0].innerText;
         document.getElementById('user-name-span').innerText = userName;
         populateMessages(userName, passphrase);
         sessionStorage.setItem('selectedUser', userName);

chatto/src/main/resources/templates/chat.html

@@ -81,7 +81,7 @@
                                             <span th:if="${au.online == true}" class="online_icon"></span>
                                         </div>
                                         <div class="user_info">
-                                            <span th:text="${au.userName}">Khalid</span>
+                                            <span class="to-user-span" th:text="${au.userName}">Khalid</span>
                                             <div th:switch="${au.online}">
                                                 <p th:case="true" th:text="${au.userName} + ' is online'">Khalid is online</p>
                                                 <th:block th:case="false">