Get and Set Form Input Values and Handle Change Events

document.addEventListener('DOMContentLoaded', () => {
  const usernameInput = document.getElementById('username');
  const newsletterCheckbox = document.getElementById('newsletter');
  const countrySelect = document.getElementById('country');
  const displayValuesButton = document.getElementById('displayValues');
  const outputDiv = document.getElementById('output');

  // Set initial values programmatically
  if (usernameInput) usernameInput.value = 'GuestUser';
  if (newsletterCheckbox) newsletterCheckbox.checked = true;
  if (countrySelect) countrySelect.value = 'CA'; // Set to Canada

  // Event listener for input change (text input)
  if (usernameInput) {
    usernameInput.addEventListener('input', (event) => {
      console.log(`Username changed to: ${event.target.value}`);
    });
  }

  // Event listener for checkbox change
  if (newsletterCheckbox) {
    newsletterCheckbox.addEventListener('change', (event) => {
      console.log(`Newsletter subscribed: ${event.target.checked}`);
    });
  }

  // Event listener for select change
  if (countrySelect) {
    countrySelect.addEventListener('change', (event) => {
      console.log(`Selected country: ${event.target.value}`);
    });
  }

  // Display current values on button click
  if (displayValuesButton) {
    displayValuesButton.addEventListener('click', () => {
      const username = usernameInput ? usernameInput.value : '';
      const newsletter = newsletterCheckbox ? newsletterCheckbox.checked : false;
      const country = countrySelect ? countrySelect.value : '';

      outputDiv.innerHTML = `
        <p>Username: <strong>${username}</strong></p>
        <p>Newsletter: <strong>${newsletter}</strong></p>
        <p>Country: <strong>${country}</strong></p>
      `;
    });
  }
});

// HTML structure for this example:
// <div id="myFormContainer">
//   <label for="username">Username:</label>
//   <input type="text" id="username" name="username"><br><br>

//   <label for="newsletter">Subscribe to Newsletter:</label>
//   <input type="checkbox" id="newsletter" name="newsletter"><br><br>

//   <label for="country">Country:</label>
//   <select id="country" name="country">
//     <option value="US">United States</option>
//     <option value="CA">Canada</option>
//     <option value="UK">United Kingdom</option>
//   </select><br><br>

//   <button id="displayValues">Display Current Values</button>

//   <div id="output"></div>
// </div>