The font size is bugged in javascript

Question

I was developing a spreadsheet editor. When I set the change font size dropdown list and the function in javascript, the program keeps set the font to too big. How can I fix this bug?
Code here:

function changeSize() {
    document.execCommand('useCSS', false, true);
    document.execCommand('fontSize', false, document.getElementById('ft_size').value + 'px')
}

Html:

<div id="textarea" contenteditable>
Type something...
</div>
    <select name='Font Size' id="ft_size" onchange="changeSize();">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="16" selected>16</option>
        <option value="18">18</option>
        <option value="24">24</option>
        <option value="30">30</option>
        <option value="36">36</option>
        <option value="48">48</option>
        <option value="60">60</option>
        <option value="72">72</option>
        <option value="96">96</option>

Answer 1

execCommand is Deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Use queryselectors and change its font style value to acomplish that.

 function changeSize(e) { document.querySelector('#textarea').style.fontSize = e.value + 'px' }

 <div id="textarea" contenteditable> Type something... </div> <select name='Font Size' onchange="changeSize(this);"> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="14">14</option> <option value="16" selected>16</option> <option value="18">18</option> <option value="24">24</option> <option value="30">30</option> <option value="36">36</option> <option value="48">48</option> <option value="60">60</option> <option value="72">72</option> <option value="96">96</option> </select>