diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 7638727e8c..822651a9db 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -62,30 +62,6 @@
 						</div>
 					</div>
 					<input id="pronouns-custom" name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
-					<script>
-						(() => {
-							const pronounsDropdown = document.getElementById('pronouns-dropdown')
-							const pronounsCustom = document.getElementById('pronouns-custom')
-							const pronounsInput = pronounsDropdown.querySelector('input')
-							pronounsCustom.removeAttribute('name')
-							pronounsDropdown.style.display = ''
-							function onPronounsDropdownUpdate() {
-								const isCustom = !(pronounsInput.value == 'he/him' || pronounsInput.value == 'she/her' || pronounsInput.value == 'they/them' || pronounsInput.value == 'it/its')
-								if (isCustom) {
-									pronounsCustom.value = pronounsInput.value
-									pronounsCustom.style.display = ''
-								} else {
-									pronounsCustom.style.display = 'none'
-								}
-							}
-							function onPronounsCustomUpdate() {
-								pronounsInput.value = pronounsCustom.value
-							}
-							onPronounsDropdownUpdate()
-							pronounsInput.addEventListener('change', onPronounsDropdownUpdate)
-							pronounsCustom.addEventListener('input', onPronounsCustomUpdate)
-						})()
-					</script>
 				</div>
 
 				<div class="divider"></div>
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 2d8c53e457..d2617dda6a 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -1,5 +1,27 @@
 import {hideElem, showElem} from '../utils/dom.js';
 
+function onPronounsDropdownUpdate() {
+  const pronounsCustom = document.getElementById('pronouns-custom');
+  const pronounsInput = document.querySelector('#pronouns-dropdown input');
+  const isCustom = !(
+    pronounsInput.value === 'he/him' ||
+    pronounsInput.value === 'she/her' ||
+    pronounsInput.value === 'they/them' ||
+    pronounsInput.value === 'it/its'
+  );
+  if (isCustom) {
+    pronounsCustom.value = pronounsInput.value;
+    pronounsCustom.style.display = '';
+  } else {
+    pronounsCustom.style.display = 'none';
+  }
+}
+function onPronounsCustomUpdate() {
+  const pronounsCustom = document.getElementById('pronouns-custom');
+  const pronounsInput = document.querySelector('#pronouns-dropdown input');
+  pronounsInput.value = pronounsCustom.value;
+}
+
 export function initUserSettings() {
   if (!document.querySelectorAll('.user.settings.profile').length) return;
 
@@ -16,4 +38,13 @@ export function initUserSettings() {
       hideElem(promptRedirect);
     }
   });
+
+  const pronounsDropdown = document.getElementById('pronouns-dropdown');
+  const pronounsCustom = document.getElementById('pronouns-custom');
+  const pronounsInput = pronounsDropdown.querySelector('input');
+  pronounsCustom.removeAttribute('name');
+  pronounsDropdown.style.display = '';
+  onPronounsDropdownUpdate();
+  pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
+  pronounsCustom.addEventListener('input', onPronounsCustomUpdate);
 }