Page 301 - Web Applications (803) Class 12
P. 301
margin-bottom: 1rem;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
}
#edit-section.hidden {
display: none;
}
File3: Pscript.js
// Get elements from the DOM
const editButton = document.getElementById(‘edit-button’);
const editSection = document.getElementById(‘edit-section’);
const profileForm = document.getElementById(‘profile-form’);
const nameElement = document.getElementById(‘name’);
const ageElement = document.getElementById(‘age’);
const locationElement = document.getElementById(‘location’);
const editName = document.getElementById(‘edit-name’);
const editAge = document.getElementById(‘edit-age’);
const editLocation = document.getElementById(‘edit-location’);
// Event listener for the “Edit Profile” button
editButton.addEventListener(‘click’, () => {
editSection.classList.toggle(‘hidden’);
nameElement.classList.toggle(‘hidden’);
ageElement.classList.toggle(‘hidden’);
locationElement.classList.toggle(‘hidden’);
// Pre-fill form fields with existing data
editName.value = nameElement.textContent;
editAge.value = ageElement.textContent;
editLocation.value = locationElement.textContent;
});
// Event listener for the profile form submission
profileForm.addEventListener(‘submit’, (e) => {
e.preventDefault();
// Update the profile information with the new values
Projects 299

