Build Preview stil is not responding take a action to fix

script.js

@@ -2,6 +2,8 @@
 // Build Calculator Form Handling
 document.addEventListener('DOMContentLoaded', function() {
     const buildForm = document.getElementById('build-form');
+    if (!buildForm) return;
+
     const previewElements = {
         toon: document.getElementById('preview-toon'),
         buildName: document.getElementById('preview-build-name'),
@@ -10,115 +12,108 @@ document.addEventListener('DOMContentLoaded', function() {
         ratingSection: document.getElementById('build-rating')
     };
 
-    // Update preview on form changes
-    if (buildForm) {
-        // Map of toon names to display names
-        const toonNames = {
+    // Maps for display names
+    const displayNames = {
+        toon: {
             'vee': 'Vee',
             'pebble': 'Pebble',
             'sprout': 'Sprout',
             'shelly': 'Shelly'
-        };
-
-        // Map of goal names to display names
-        const goalNames = {
+        },
+        goal: {
             'ichor': 'Ichor Farming',
             'survival': 'Solo Survival',
             'research': 'Research Farming',
             'support': 'Team Support'
-        };
-
-        // Map of trinket names to display names
-        const trinketNames = {
+        },
+        trinket: {
             'remote': "Vee's Remote",
             'magnifying': 'Magnifying Glass',
             'plush': 'Dandy Plush',
             'bow': 'Pink Bow'
-        };
-
-        buildForm.addEventListener('input', function(e) {
-            const formData = new FormData(buildForm);
-            const data = Object.fromEntries(formData.entries());
-
-            // Update toon preview
-            if (data.toon && toonNames[data.toon]) {
-                previewElements.toon.textContent = toonNames[data.toon];
-            } else {
-                previewElements.toon.textContent = 'Select a Toon';
-            }
-
-            // Update build name preview
-            if (data.buildName) {
-                previewElements.buildName.textContent = data.buildName;
-                if (data.goal && goalNames[data.goal]) {
-                    previewElements.buildName.textContent += ` - ${goalNames[data.goal]}`;
-                }
-            } else {
-                previewElements.buildName.textContent = 'No build name yet';
-            }
-
-            // Update trinkets preview
-            if (data.trinket1 || data.trinket2) {
-                const trinkets = [];
-                if (data.trinket1 && trinketNames[data.trinket1]) trinkets.push(trinketNames[data.trinket1]);
-                if (data.trinket2 && trinketNames[data.trinket2]) trinkets.push(trinketNames[data.trinket2]);
-                previewElements.trinkets.textContent = trinkets.join(' + ') || 'No trinkets selected';
-            } else {
-                previewElements.trinkets.textContent = 'No trinkets selected';
-            }
+        }
+    };
 
-            // Update rationale preview
-            if (data.rationale) {
-                previewElements.rationale.textContent = data.rationale;
-            } else {
-                previewElements.rationale.textContent = 'Add your strategic rationale to see it here';
+    // Update preview function
+    function updatePreview() {
+        const formData = new FormData(buildForm);
+        const data = Object.fromEntries(formData.entries());
+
+        // Update toon preview
+        if (data.toon && displayNames.toon[data.toon]) {
+            previewElements.toon.textContent = displayNames.toon[data.toon];
+        } else {
+            previewElements.toon.textContent = 'Select a Toon';
+        }
+
+        // Update build name preview
+        if (data.buildName) {
+            previewElements.buildName.textContent = data.buildName;
+            if (data.goal && displayNames.goal[data.goal]) {
+                previewElements.buildName.textContent += ` - ${displayNames.goal[data.goal]}`;
             }
+        } else {
+            previewElements.buildName.textContent = 'No build name yet';
+        }
+
+        // Update trinkets preview
+        if (data.trinket1 || data.trinket2) {
+            const trinkets = [];
+            if (data.trinket1 && displayNames.trinket[data.trinket1]) trinkets.push(displayNames.trinket[data.trinket1]);
+            if (data.trinket2 && displayNames.trinket[data.trinket2]) trinkets.push(displayNames.trinket[data.trinket2]);
+            previewElements.trinkets.textContent = trinkets.join(' + ') || 'No trinkets selected';
+        } else {
+            previewElements.trinkets.textContent = 'No trinkets selected';
+        }
+
+        // Update rationale preview
+        if (data.rationale) {
+            previewElements.rationale.textContent = data.rationale;
+        } else {
+            previewElements.rationale.textContent = 'Add your strategic rationale to see it here';
+        }
+
+        // Show rating section when form is complete
+        if (data.toon && data.goal && data.trinket1 && data.trinket2 && data.buildName) {
+            previewElements.ratingSection.classList.remove('hidden');
+        } else {
+            previewElements.ratingSection.classList.add('hidden');
+        }
+
+        feather.replace();
+    }
 
-            // Show rating section when form is complete
-            if (data.toon && data.goal && data.trinket1 && data.trinket2 && data.buildName) {
-                previewElements.ratingSection.classList.remove('hidden');
-            } else {
-                previewElements.ratingSection.classList.add('hidden');
-            }
+    // Initialize preview
+    updatePreview();
 
-            feather.replace();
+    // Listen for all form changes
+    buildForm.addEventListener('input', updatePreview);
+    buildForm.addEventListener('change', updatePreview);
+    // Handle form submission
+    buildForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const formData = new FormData(buildForm);
+        const data = Object.fromEntries(formData.entries());
+
+        // Validate form
+        if (!data.toon || !data.goal || !data.trinket1 || !data.trinket2 || !data.buildName) {
+            alert('Please fill all required fields!');
+            return;
+        }
+
+        // Save to localStorage
+        const builds = JSON.parse(localStorage.getItem('builds') || '[]');
+        builds.push({
+            ...data,
+            date: new Date().toISOString()
         });
+        localStorage.setItem('builds', JSON.stringify(builds));
 
-if (buildForm) {
-        buildForm.addEventListener('submit', function(e) {
-            e.preventDefault();
-            // Get form values
-            const toon = buildForm.querySelector('select:nth-of-type(1)').value;
-            const goal = buildForm.querySelector('select:nth-of-type(2)').value;
-            const trinket1 = buildForm.querySelector('select:nth-of-type(3)').value;
-            const trinket2 = buildForm.querySelector('select:nth-of-type(4)').value;
-            const buildName = buildForm.querySelector('input[type="text"]').value;
-            const rationale = buildForm.querySelector('textarea').value;
-
-            // Validate form
-            if (!toon || !goal || !trinket1 || !trinket2 || !buildName) {
-                alert('Please fill all required fields!');
-                return;
-            }
-
-            // Save to localStorage
-            const builds = JSON.parse(localStorage.getItem('builds') || '[]');
-            builds.push({
-                toon,
-                goal,
-                trinket1,
-                trinket2,
-                buildName,
-                rationale,
-                date: new Date().toISOString()
-            });
-            localStorage.setItem('builds', JSON.stringify(builds));
-
-            alert('Build saved successfully!');
-            buildForm.reset();
-        });
-    }
-// Smooth scrolling for anchor links
+        alert('Build saved successfully!');
+        buildForm.reset();
+        updatePreview(); // Reset preview after submission
+    });
+    // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
         e.preventDefault();