diff --git a/app/javascript/packs/userProfileSettings.js b/app/javascript/packs/userProfileSettings.js index 8013fd49e..7847e0805 100644 --- a/app/javascript/packs/userProfileSettings.js +++ b/app/javascript/packs/userProfileSettings.js @@ -1,31 +1,23 @@ -const userFieldIds = ['user[name]', 'user[email]', 'user[username]']; -const profileFieldIds = Array.from( - document.querySelectorAll('[id^="profile["]'), -).map((node) => node.id); -const allFieldIds = [...userFieldIds, ...profileFieldIds]; +const userSettingForm = document.getElementById('user-profile-form'); +const profileFields = document.querySelectorAll('[id^="profile["]'); export function fieldCharacterLimits() { - window.addEventListener('load', () => { - allFieldIds.forEach((field_id) => { - const field = document.getElementById(field_id); - const fieldValueLength = field.value.length; - const fieldCharacterSpan = document.getElementById( - field.dataset.characterSpanId, - ); - fieldCharacterSpan.innerHTML = fieldValueLength; - }); + profileFields.forEach((node) => { + const field = document.getElementById(node.id); + const fieldValueLength = field.value.length; + const fieldCharacterSpan = document.getElementById( + field.dataset.characterSpanId, + ); + fieldCharacterSpan.innerHTML = fieldValueLength; + }); - document - .getElementById('user-profile-form') - .addEventListener('keyup', (event) => { - if (!event.target.dataset.characterSpanId) { - return; - } + userSettingForm.addEventListener('keyup', (event) => { + if (!event.target.dataset.characterSpanId) { + return; + } - document.getElementById( - event.target.dataset.characterSpanId, - ).innerHTML = event.target.value.length; - }); + document.getElementById(event.target.dataset.characterSpanId).innerHTML = + event.target.value.length; }); } diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb index 93ca80e6b..2975520b1 100644 --- a/app/views/users/_profile.html.erb +++ b/app/views/users/_profile.html.erb @@ -13,13 +13,7 @@ maxlength: 30, class: "crayons-textfield", placeholder: "John Doe", - value: @user.name, - aria: { describedby: "name-description" }, - data: { character_span_id: "name-characters" } %> -
- Available characters used: - /30 -
+ value: @user.name %>- Available characters used: - /50 -
+ value: @user.email %>- Available characters used: - /30 -
+ value: @user.username %>