Javascript can't change text after typing some text on textarea

Question

After typing some text on the textarea these three button is to working.

I inspect that in google chrome and I saw in html rendered code it successfully adds innerHtml but it doesn't show it on textarea.

Why it is not working?

How can I solve this problem?

    function clickTicK(element){
        var texta = document.getElementById(element);
        texta.innerHTML = '✔';
    }
    function clickCross(element){
        var texta = document.getElementById(element);
        texta.innerHTML = '✘';
    }

    function enable(element) {
        var texta = document.getElementById(element);
        texta.innerHTML = '';
    }

<textarea name="textareaname" id="textareaid" placeholder="click here to edit"></textarea><br>
<button onclick="enable('textareaid');">&#9998;</button><br>
<button onclick="clickTicK('textareaid');">&#x2714;</button><br>
<button onclick="clickCross('textareaid');">&#x2718;</button>

If I use textarea.value then it works but shows code "&#x2714" or "&#x2718" but not symbol.

        function clickTicK(element){
            var texta = document.getElementById(element);
            texta.value = '✔';
        }
        function clickCross(element){
            var texta = document.getElementById(element);
            texta.value = '✘';
        }

        function enable(element) {
            var texta = document.getElementById(element);
            texta.value = '';
        }

    <textarea name="textareaname" id="textareaid" placeholder="click here to edit"></textarea><br>
    <button onclick="enable('textareaid');">&#9998;</button><br>
    <button onclick="clickTicK('textareaid');">&#x2714;</button><br>
    <button onclick="clickCross('textareaid');">&#x2718;</button>

Answer 1

You can use jQuery's html() function to extract the html you want and then set the value to that. See example below:

function clickTicK(element){
        var texta = document.getElementById(element);
        texta.value = $('<span>').html('&#x2714;').html();
    }
    function clickCross(element){
        var texta = document.getElementById(element);
        texta.value = $('<span>').html('&#x2718;').html();
    }

    function enable(element) {
        var texta = document.getElementById(element);
        texta.value = '';
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea name="textareaname" id="textareaid" placeholder="click here to edit"></textarea><br>
<button onclick="enable('textareaid');">&#9998;</button><br>
<button onclick="clickTicK('textareaid');">&#x2714;</button><br>
<button onclick="clickCross('textareaid');">&#x2718;</button>

Answer 2

You have to use value not innerHTML on <textarea/>

function clickTicK(element){
        var texta = document.getElementById(element);
        texta.value = '✔';
    }
    function clickCross(element){
        var texta = document.getElementById(element);
        texta.value = '✘';
    }

    function enable(element) {
        var texta = document.getElementById(element);
        texta.value = '';
    }

<textarea name="textareaname" id="textareaid" placeholder="click here to edit"></textarea><br>
<button onclick="enable('textareaid');">&#9998;</button><br>
<button onclick="clickTicK('textareaid');">&#x2714;</button><br>
<button onclick="clickCross('textareaid');">&#x2718;</button>