Retrieve and Update Form Input Values Programmatically

// Helper to create form elements for demonstration
function createFormElements() {
  const formDiv = document.createElement('div');
  formDiv.id = 'my-form-container';
  formDiv.innerHTML = `
        <label for="textInput">Text Input:</label>
        <input type="text" id="textInput" value="Initial Text"><br><br>

        <label for="checkboxInput">Checkbox:</label>
        <input type="checkbox" id="checkboxInput" checked><br><br>

        <label for="selectInput">Select Option:</label>
        <select id="selectInput">
          <option value="option1">Option 1</option>
          <option value="option2" selected>Option 2</option>
          <option value="option3">Option 3</option>
        </select><br><br>

        <button id="getValueBtn">Get Values</button>
        <button id="setValueBtn">Set New Values</button>
        <div id="output"></div>
      `;
  document.body.appendChild(formDiv);
}
createFormElements();

const textInput = document.getElementById('textInput');
const checkboxInput = document.getElementById('checkboxInput');
const selectInput = document.getElementById('selectInput');
const outputDiv = document.getElementById('output');
const getValueBtn = document.getElementById('getValueBtn');
const setValueBtn = document.getElementById('setValueBtn');

function displayCurrentValues() {
  const textValue = textInput.value;
  const isChecked = checkboxInput.checked;
  const selectedOption = selectInput.value;

  outputDiv.innerHTML = `
        <p>Text Input Value: <strong>${textValue}</strong></p>
        <p>Checkbox is Checked: <strong>${isChecked}</strong></p>
        <p>Select Value: <strong>${selectedOption}</strong></p>
      `;
}

function setNewValues() {
  textInput.value = 'New Programmatic Text';
  checkboxInput.checked = false; // Uncheck it
  selectInput.value = 'option3'; // Select Option 3
  outputDiv.textContent = 'Values have been programmatically updated.';
  // Display updated values after a short delay
  setTimeout(displayCurrentValues, 500);
}

getValueBtn.addEventListener('click', displayCurrentValues);
setValueBtn.addEventListener('click', setNewValues);

// Initial display
displayCurrentValues();