SELECT option onchange

<!DOCTYPE html>
<html>
<title>SELECT option onchange</title>
<style>
  #fruits {
    width: 350px;
    text-align: center;
  }

  select {
    color: red;
    font-size: 40px;
    letter-spacing: 5px;
  }

  #txt {
    text-transform: capitalize;
  }

  button:nth-child(1) {
    margin: 5px;
    float: right;
  }

  .buttonContainer {
    width: 100px;
    float: right;
  }
</style>

<body>

  <select name="fruits" id="fruits">
    <option disabled selected value>Select</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
    <option value="carrot">Carrot</option>
    <option value="watermelon">Watermelon</option>
    <option value="lime">Lime</option>
  </select>

  <div class='buttonContainer'>
    <button onclick='getOptions()'>Get options</button>
    <button onclick='clearOptions()'>Clear options</button>
  </div>

  <p id='txt'></p>
  <script>
    x = [];
    frut = document.getElementsByName('fruits');
    window.addEventListener('change', function() {
      for (i = 0; i < frut.length; i++) {
        x.push(frut[i].value);
        x.sort();
      }
    });

    function getOptions() {
      txt.innerHTML = x;
    }

    function clearOptions() {
      txt.innerHTML = '';
      return x = [];
    }
  </script>
</body>

</html>