CODEWITHSUNDEEP
javascript
Hamed Kamrava
Hamed Kamrava

Reputation: 12847

JS: Add comma to a string

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?

Upvotes: 2

Views: 3731

Answers (3)

Harry
Harry

Reputation: 89750

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:

  1. IE8 label update via javascript issue
  2. 'innerText' works in IE, but not in Firefox

Upvotes: 5

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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.

Upvotes: 3

Akhil
Akhil

Reputation: 2602

Try this

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

instead of .value, use .innerHTML

Upvotes: 5

Related Questions