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?

No wrap - in <head>.

elclanrs
– elclanrs

2013-08-17 07:45:15 +00:00
Commented Aug 17, 2013 at 7:45 — elclanrs
– elclanrs, Commented Aug 17, 2013 at 7:45

Community · Accepted Answer · 2017-05-23 12:13:57Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered Aug 17, 2013 at 7:44

Harry

90.1k26 gold badges216 silver badges224 bronze badges

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

3 Comments

Sumurai8 Over a year ago

Worth nothing that element.value sets (or gets) the value property of the tag (e.g. <input value="" />), 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.

Akhil Over a year ago

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

Harry Over a year ago

@Akhil: Very valid point. Paulpro's answer in this thread has the correct method for using innerText/textContent. I will be updating my answer soon.

Akhil · Accepted Answer · 2013-08-17 07:44:23Z

5

Try this

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

instead of .value, use .innerHTML

answered Aug 17, 2013 at 7:44

Akhil

2,60225 silver badges37 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2013-08-17 07:45:31Z

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, 2013 at 7:45

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Collectives™ on Stack Overflow

JS: Add comma to a string

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related