Javascript pass a variable from function call to innerHtml

Question

Ok, this might be an easy one, im just not sure how to do it. I have a main function where it's taking in an "id". This id is unique and I want to pass it over to another function that is doing a count for me and returns that count to an innerHtml span tag.

Reason for this is because I can have 5 of these open at the same time, but they will have the same span id name "editCommentsCounter"...I want them to be like "editCommentsCounter-id"

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

    idx = 2;
    maxlength = 250;
    count = maxlength - comLength;


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

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

}

Basically I want to take :

   spanTag.innerHTML = "You have <strong><span id='editCommentsCounter'>"+count+"</span></strong> characters left.<br/>";

and make that into something like `span id='editCommentsCounter-' + id

so when I call this:

element.onfocus = element.onkeydown = element.onkeyup = function(){return characterCounterEdit('editCommentsCounter', maxlength, this);};

I call this above with editCommentsCounter with that id attached to it

See what Im saying?

Someone likes polluting the global namespace. Use var!

epascarello
– epascarello

2012-07-16 14:57:18 +00:00
Commented Jul 16, 2012 at 14:57 — epascarello
– epascarello, Commented Jul 16, 2012 at 14:57

Mike S. · Accepted Answer · 2012-07-16 15:05:57Z

1

Use:

document.getElementById("editCommentsCounter-" + id).innerHTML = someVal;

You have a lot there but it seems like that is what you're trying to do to write the innerHTML val. If not please tell me more in comments and I can suggest more.

I see you want to dynamically build a new span, then populate the content. One thing that is puzzling in the beginning you reference the element and concat "id"+id. Have to think about this one so apologies for too quick response; was just looking at your end result.

Setting the unique ID:

var spanTag = document.createElement("span");
spanTag.id = 'editCommentsCounter-' + id;
spanTag.innerHTML = 'You have ...' + count + '...';
document.body.appendChild(spanTag);

I hope this helps!

edited Jul 16, 2012 at 15:05

answered Jul 16, 2012 at 14:56

Mike S.

4,8791 gold badge35 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Doc Holiday Over a year ago

No....Im trying to create a spanTag using innerHtml..instead of spanTag.innerHTML = "You have "+count+" characters left. ";

Doc Holiday Over a year ago

I want editCommentsCounter-id in the span......so when I call the function at the bottm of the script....I call it with editCommentsCounter-id as well

Doc Holiday Over a year ago

ok....this is it basically...there are 2 occurences of editCommentsCounter...I want them both to be editCommentsCounter-id in the code I have provided in the question...mind you 'id' is a value that I passed into the function

Mike S. Over a year ago

see my latest and that should do it, with tweaks to your specific needs of course.

Doc Holiday Over a year ago

Thanks...now how do I pass that spanTag like that into :function(){return characterCounterEdit('editCommentsCounter', maxlength, this);};

|

Collectives™ on Stack Overflow

Javascript pass a variable from function call to innerHtml

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related