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 = '&#x2714;';
    }
    function clickCross(element){
        var texta = document.getElementById(element);
        texta.innerHTML = '&#x2718;';
    }

    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 = '&#x2714;';
        }
        function clickCross(element){
            var texta = document.getElementById(element);
            texta.value = '&#x2718;';
        }

        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>

textarea does not have innerHTML, it as a value like all other inputs. — epascarello, Oct 03 '16 at 16:25
As said, You should use value and not innerHTML. You can convert the special characters in javascript. Checkout the most voted answer from http://stackoverflow.com/questions/784586/convert-special-characters-to-html-in-javascript — acid_srvnn, Oct 03 '16 at 16:59
To convert "✔" or "✘" to the symbols, you can use any of the methods from that stackoverflow link. — acid_srvnn, Oct 03 '16 at 17:12

score 1 · Accepted Answer · answered Oct 03 '16 at 17:27

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>

score 0 · Answer 2 · answered Oct 03 '16 at 16:33

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

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

    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>

but it dont show the symbol ... it shows the code "✘" or "✔" — Md. Nasir Uddin Bhuiyan, Oct 03 '16 at 16:36

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

2 Answers2