title: Font style in javascript
body: <p>I have a script that will change paragraph style, color and size and I want it to make those 3 things but I don't know how.</p>
  <ul>
  <li>color is assigned to button <br></li>
  <li>style is assigned to select with 2 options <br></li>
  <li>size is changed according input type=number value in percentages<br></li>
  </ul>
  <p>For now it just ignores if and changes font to red and italic</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function red() {
    if (document.getElementById('style').value == 'style-1') {
      document.getElementById('result').style.color = 'red';
      document.getElementById('result').style.fontStyle = 'normal';
    } else {
      document.getElementById('result').style.color = 'red';
      document.getElementById('result').style.fontStyle = 'italic';
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Text size&lt;/p&gt;
  &lt;input type='number' id='size' class='input-width'&gt;%
  &lt;p&gt;
    &lt;select id='style' size='2'&gt;
      &lt;option id='style-1'&gt;normal&lt;/option&gt;
      &lt;option id='style-2'&gt;italic&lt;/option&gt;
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;What color?&lt;/p&gt;
  &lt;input type='button' value='' class='button-red' onclick='red()'&gt;
  &lt;input type='button' value='' class='button-green' onclick='green()'&gt;
  &lt;input type='button' value='' class='button-blue' onclick='blue()'&gt;
  &lt;p id='result'&gt;This is an example&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>