Question

Hello how would I create this in Javascript?:

  You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH']}</span></strong> characters left.<br/>

add it above this:

 function editCommentToggle( id )
{
    theRow = document.getElementById("id"+id);
    //user = theRow.cells[0].innerHTML;
    //date = theRow.cells[1].innerHTML;
    com = theRow.cells[2].innerText ;


    idx = 2;
    maxlength = 250;

                // Comment field
        cell = theRow.cells[idx];
        while( cell.childNodes.length > 0 ) cell.removeChild(cell.childNodes[0]);

        //spanTag = document.createElement("span"); 
        //spanTag.innerHTML = "id='commentsCounter'>" + maxlength + "</span>characters left.<br/>" 
        //cell.appendChild(spanTag);
        element = document.createElement("textarea");
        element.id="comments-"+id;
        element.rows="3";
        element.value = com;
        element.style.width = "400px";
        element.maxLength = "250";
        element.onfocus = element.onkeydown = element.onkeyup = function(){return characterCounterEdit(undefined, maxlength, this);}; 
        cell.appendChild(element);

        $(function()
                {
                    setTimeout("syncCommentTableSizes()",0);    <%-- Run after HTC code --%>
                });

    // Actions field
    cell = theRow.cells[++idx];
    while( cell.childNodes.length > 0 ) cell.removeChild(cell.childNodes[0]);

    link = document.createElement("a");
    link.href = 'javascript:saveComment('+id+')';

    element = document.createElement( "img" );
    element.className = "edit"; // check if we need this changed
    element.src="../images/icon_save.gif";
    element.border="0";
    element.alt = "Save";

    link.appendChild( element );

    cell.appendChild(link);
    cell.appendChild( document.createTextNode("  ") );

    link = document.createElement("a");
    link.href = 'javascript:cancelCommentEdit('+id+')';

    element = document.createElement( "img" );
    element.className = "delete"; // check if we need this changed
    element.src="../images/icon_cancel.gif";
    element.border="0";
    element.alt = "Cancel";

    link.appendChild(element);
    cell.appendChild(link);
}

jsp:

<table id="add-comment-table" class="data_table" style="border-top-style: none; margin-top: 0px;">
<td colspan="3">
    You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH']}</span></strong> characters left.<br/>
    <textarea id="comment" name="comment" rows="3"
        onfocus="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
        onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
        onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"></textarea>
        <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
</td>

Answer 1

Output your constant inside the hidden div.

You can then grab the innerHTML from the html, rather than trying to set it via javascript.

<div id="maxSize" style="display:none;">${const['COMMENT_MAX_LENGTH']}</div>
<span id="commentsCounter"></span>
<div onclick="update()">Click</div>

<script>
    function update()
    {
        var maxLength = parseInt( document.getElementById( "maxSize" ).innerHTML );
        document.getElementById( "commentsCounter" ).innerHTML = maxLength;
    }
</script>