window.addEventListener('load', () => {
  const text = document.createElement('input')

  const checkbox = document.createElement('input')
  checkbox.setAttribute('type', 'checkbox')

  const radio = document.createElement('input')
  radio.setAttribute('type', 'radio')

  const range = document.createElement('input')
  range.setAttribute('type', 'range')

  const select = document.createElement('select')
  Array.from({length: 5}, (_, i) => i).forEach(i => {
    const option = document.createElement('option')
    option.setAttribute('value', i)
    option.innerText = i
    select.appendChild(option)
  })

  const div = document.createElement('div')

  const elements = { text, checkbox, range, select, radio, div}
  
  Object.entries(elements).forEach(([name, el]) => {
    document.body.appendChild(el);
    ['click', 'input', 'change'].forEach(type => {
      el.addEventListener(type, e => {
        const row = document.createElement('div')
        div.appendChild(row)
        row.innerText = [name, type, e.target.value, e.target.checked, e.target.selectedIndex].join(', ')
      })
    })
  })
})