Md. Nasir Uddin Bhuiyan Md. Nasir Uddin Bhuiyan - 2 months ago 9
HTML Question

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

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 = '&#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>




Answer

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>