<p>Вибери потрібне значення для <code>text-transform</code>:</p>

<select id="form">
  <option value="capitalize" name="value2" selected>capitalize</option>
  <option value="uppercase" name="value2">uppercase</option>
  <option value="lowercase" name="value2">lowercase</option>
</select>
<p id="text">Перший символ кожного слова в реченні буде заголовним. Примітка: Іншу символи свій регіст не змінять.</p>
<hr>
<p id="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos magnam dolores quam eum veritatis esse non. Maxime, culpa. Doloribus, sit!
</p>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
  text-transform: capitalize;
}

#text {
  height: 100px;
  background-color: #eee;
  padding: 16px 0;
}
var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

  var textArray = { 'capitalize': 'Перший символ кожного слова в реченні буде заголовним. Примітка: Іншу символи свій регіст не змінять.',
                    'uppercase': 'Всі символи тексту стають великими (верхній регістр).',
                   'lowercase': 'Всі символи тексту стають малими (нижній регістр).'};

form.onchange = function change() {
  
  var newVal = getNewValue();  
  block.style.textTransform = newVal;
  text.innerHTML = textArray[newVal];
  
}

function getNewValue() {
  
  var result = '';
  
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }
  
  return result;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.