JS: Add comma to a string

Question

I'm trying to add comma to a string and show that into label through following function :

HTML :

<input type="text" onkeyup="addCommas(this.value);" /> <br /><br />
<label id="result">Result: </label>

JS

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    var result = x1 + x2;
    document.getElementById('result').value = result;
}

JsFiddle

But won't show the result into label.

What am i doing wrong?

score 5 · Answer 1 · answered Aug 17 '13 at 07:44

5

Try this

 document.getElementById('result').innerHTML = result;

instead of .value, use .innerHTML

answered Aug 17 '13 at 07:44

Akhil

2,602
23
36

score 5 · Accepted Answer · edited May 23 '17 at 12:13

5

Label doesn't use value to assign values. It uses innerHTML. Try the below.

document.getElementById('result').innerHTML = result;

As pointed out in comments, it is better to use textContent or innerText options to set value (only for plain text) as they are safer than innerHTML.You can use it as shown below.

document.getElementById('result').textContent = result;

or

document.getElementById('result').innerText = result;

innerText property is not supported by FireFox and it uses the textContent property. Hence, the below method will work across browsers.

var resultDiv = document.getElementById('result');

if (typeof resultDiv.innerText === 'string') {
    resultDiv.innerText = result;
}
else {
    resultDiv.textContent = result;
}

Sources:

edited May 23 '17 at 12:13

Community

1
1

answered Aug 17 '13 at 07:44

Harry

87,580
25
202
214

1

Worth nothing that `element.value` sets (or gets) the value property of the tag (e.g. ``), while `element.innerHTML` sets (or gets) the html that is between the starting tag and the end tag. If you are not wanting to set html, use `element.innerText` instead. An attacker could otherwise use your site to execute an arbitary script. See [here](https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML). – Sumurai8 Aug 17 '13 at 07:52
1

innerText is not Supported by firefox. innerHTML is better for cross browser compatibility. Otherwise based on the type of browser, use textContent or innerText. Refer [this](http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox) – Akhil Dec 05 '13 at 10:25
@Akhil: Very valid point. Paulpro's answer in [this thread](http://stackoverflow.com/questions/9370184/ie8-label-update-via-javascript-issue) has the correct method for using `innerText`/`textContent`. I will be updating my answer soon. – Harry Dec 05 '13 at 12:15

score 3 · Answer 3 · answered Aug 17 '13 at 07:45

3

Use innerHTML instead of value:

document.getElementById('result').innerHTML = result;

JSFIDDLE http://jsfiddle.net/J4mLD/1/

Also note, to use inline event handlers in JSFIDDLE you must set the second dropdown to one of the nowrap options.

answered Aug 17 '13 at 07:45

Kevin Bowersox

93,289
19
159
189

JS: Add comma to a string

3 Answers3

Linked