By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,494 Members | 976 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,494 IT Pros & Developers. It's quick & easy.

How can I change this innerText in Mozilla Firefox?

P: n/a
Hi!

I'm trying to update a number in a document with the following code. It
displays a number, a div block with a minus sign and a div block with a
plus sign. When I click the plus sign I want the number to add one to
itself, and when I press minus I want it to subtract one.

This works in Internet Explorer, but nothing happens in Mozilla.

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like?

<html>
<head>
<title>Add or subtract</title>
<script type="text/javascript">

function change_number(minus_or_plus){

var number = document.getElementById("number");
old_number = parseInt(number.innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerText = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerText = new_number;
}
}

</script>
</head>
<body>

<div id="number">99</div>
<div style="cursor:hand;" onmousedown="change_number('minus')">-</div>
<div style="cursor:hand;" onmousedown="change_number('plus')">+</div>

</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
Jeff wrote:
[snip]

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like?

<html>
<head>
<title>Add or subtract</title>
<script type="text/javascript">

function change_number(minus_or_plus){

var number = document.getElementById("number");
old_number = parseInt(number.innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerText = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerText = new_number;
}
}

</script>
function change_number(minus_or_plus){
d=document.getElementById("number").firstChild.dat a;
document.getElementById("number").firstChild.data =arguments[0]=='plus'?
+d+1:d-1;
}

Mick </head>
<body>

<div id="number">99</div>
<div style="cursor:hand;" onmousedown="change_number('minus')">-</div>
<div style="cursor:hand;" onmousedown="change_number('plus')">+</div>

</body>
</html>

Jul 23 '05 #2

P: n/a
Mick White wrote:
[...]

function change_number(minus_or_plus){
d=document.getElementById("number").firstChild.dat a;
document.getElementById("number").firstChild.data =arguments[0]=='plus'?
+d+1:d-1;
}


I like your logic, however this (IMHO) is a bit easier to follow and
maintain (and uses local rather than global variables):

function change_number(sign){
var d = document.getElementById("number").firstChild;
var t = d.data;
d.data = (sign =='plus')? +t+1 : +t-1;
}

Notes:
1. No allowance is made for browsers that don't support
getElementById().
2. The div with id="number" must contain a number as the first child.
3. The "+" used in "+t-1" is not strictly required, but keeps the
code neater. ;-p

--
Zif
Jul 23 '05 #3

P: n/a
Jeff wrote:

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like? function change_number(minus_or_plus){

var number = document.getElementById("number");
old_number = parseInt(number.innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerText = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerText = new_number;
}
}

Mick White wrote:
function change_number(minus_or_plus){
d=document.getElementById("number").firstChild.dat a;
document.getElementById("number").firstChild.data =arguments[0]=='plus'?
+d+1:d-1;
}

Mick


Very elegant. This works smoothly in both ie and mozilla!
Thank you!

Jul 23 '05 #4

P: n/a
Zifud wrote:
Mick White wrote:
[...]

function change_number(minus_or_plus){
d=document.getElementById("number").firstChild.dat a;
document.getElementById("number").firstChild.data
=arguments[0]=='plus'? +d+1:d-1;
}


I like your logic, however this (IMHO) is a bit easier to follow and
maintain (and uses local rather than global variables):

function change_number(sign){
var d = document.getElementById("number").firstChild;
var t = d.data;
d.data = (sign =='plus')? +t+1 : +t-1;
}


I agree with you. Somehow you managed to make the code more
maintainable, more readable and more compact all at once. You don't see
that very often!

I realize my mistake was using innerText, but didn't realize before now
that this was an Internet Explorer thing.

Thank you for your insight!

Jul 23 '05 #5

P: n/a
JRS: In article <41********@news.broadpark.no>, dated Tue, 11 Jan 2005
20:21:43, seen in news:comp.lang.javascript, Jeff <no****@jo.se> posted :
This works in Internet Explorer, but nothing happens in Mozilla.

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like?
Don't know, but the code could be simplified :
function change_number(minus_or_plus){

var number = document.getElementById("number");
old_number = parseInt(number.innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerText = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerText = new_number;
}
} <div style="cursor:hand;" onmousedown="change_number('minus')">-</div>
<div style="cursor:hand;" onmousedown="change_number('plus')">+</div>


BTW, new_number & old_number should have been var; parseInt is safer with
a second parameter, though that's not essential here; parseInt is not
needed (see FAQ).

function change_number(X){
with (document.getElementById("number"))
innerText = +innerText + X }

<div id="number">99</div>
<div style="cursor:hand;" onmousedown="change_number(-1)">-</div>
<div style="cursor:hand;" onmousedown="change_number(+1)">+</div>
That's OK in MSIE 4, after
if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) {
return document.all[id] } }

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #6

P: n/a
Dr John Stockton wrote:
JRS: In article <41********@news.broadpark.no>, dated Tue, 11 Jan 2005
20:21:43, seen in news:comp.lang.javascript, Jeff <no****@jo.se> posted :
This works in Internet Explorer, but nothing happens in Mozilla.

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like?
Don't know, but the code could be simplified :

function change_number(X){
with (document.getElementById("number"))
innerText = +innerText + X }

<div id="number">99</div>
<div style="cursor:hand;" onmousedown="change_number(-1)">-</div>
<div style="cursor:hand;" onmousedown="change_number(+1)">+</div>


That's a very cool rewrite. I'll head back to my javascript book to try
to figure out how you did that!

As you say yourself this code doesn't work in mozilla.

Other posters has pointed out that one should update the first node of
the number element instead of trying to change it through the IE only
innerText.

Thanks!
Jul 23 '05 #7

P: n/a
On Wed, 12 Jan 2005 00:55:33 GMT, Zifud <Zi***@hotmail.com> wrote:
Mick White wrote:
[...]
function change_number(minus_or_plus){
d=document.getElementById("number").firstChild.dat a;
document.getElementById("number").firstChild.data
=arguments[0]=='plus'? +d+1:d-1;
}


I like your logic, however this (IMHO) is a bit easier to follow and
maintain (and uses local rather than global variables):

function change_number(sign){
var d = document.getElementById("number").firstChild;
var t = d.data;
d.data = (sign =='plus')? +t+1 : +t-1;
}

Notes:
1. No allowance is made for browsers that don't support
getElementById().
2. The div with id="number" must contain a number as the first child.
3. The "+" used in "+t-1" is not strictly required, but keeps the
code neater. ;-p

I like Zifud's approach with one minor change.
d.data = (sign == 'minus')? --t : ++t;
were we in an environment where time is an issue prefix increment and
decrement are minimally faster than addition and subtraction, and (IMHO,
since everyone has one) it looks better.

Interesting little educational exercise, btw.
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #8

P: n/a
Al Jones wrote:
On Wed, 12 Jan 2005 00:55:33 GMT, Zifud <Zi***@hotmail.com> wrote:
Mick White wrote:
[...] I like your logic, however this (IMHO) is a bit easier to follow and
maintain (and uses local rather than global variables): d.data = (sign =='plus')? +t+1 : +t-1;
I like Zifud's approach with one minor change.
d.data = (sign == 'minus')? --t : ++t;


Nice detail. And not to forget more estethic!

Jul 23 '05 #9

P: n/a
Al Jones wrote:
[...]

function change_number(sign){
var d = document.getElementById("number").firstChild;
var t = d.data;
d.data = (sign =='plus')? +t+1 : +t-1;
}

Notes:
1. No allowance is made for browsers that don't support
getElementById().
2. The div with id="number" must contain a number as the first child.
3. The "+" used in "+t-1" is not strictly required, but keeps the
code neater. ;-p

I like Zifud's approach with one minor change.
d.data = (sign == 'minus')? --t : ++t;
were we in an environment where time is an issue prefix increment and
decrement are minimally faster than addition and subtraction, and
(IMHO, since everyone has one) it looks better.


Considering that no validation has been done on the number...

But let's keep Dr. J happy and add support for older IE (and abbreviate
the code by getting rid of the redundant 't' - it was there to look
good without wrapping...):

function change_number(sign){
if (document.getElementById) {
var d = document.getElementById("number").firstChild;
} else if (document.all) {
var d = document.all["number"].firstChild;
}
d.data = (sign =='minus')? --d.data : ++d.data;
}

--
Zif
Jul 23 '05 #10

P: n/a
JRS: In article <3n*****************@news.optus.net.au>, dated Fri, 14
Jan 2005 07:18:23, seen in news:comp.lang.javascript, Zifud
<Zi***@hotmail.com> posted :
Al Jones wrote:
[...]

function change_number(sign){
var d = document.getElementById("number").firstChild;
var t = d.data;
d.data = (sign =='plus')? +t+1 : +t-1;
}

Notes:
1. No allowance is made for browsers that don't support
getElementById().
2. The div with id="number" must contain a number as the first child.
3. The "+" used in "+t-1" is not strictly required, but keeps the
code neater. ;-p
I like Zifud's approach with one minor change.
d.data = (sign == 'minus')? --t : ++t;
were we in an environment where time is an issue prefix increment and
decrement are minimally faster than addition and subtraction, and
(IMHO, since everyone has one) it looks better.


Considering that no validation has been done on the number...


There is no need to validate a hard-coded number.
But let's keep Dr. J happy and add support for older IE (and abbreviate
the code by getting rid of the redundant 't' - it was there to look
good without wrapping...):

function change_number(sign){
if (document.getElementById) {
var d = document.getElementById("number").firstChild;
} else if (document.all) {
var d = document.all["number"].firstChild;
}
d.data = (sign =='minus')? --d.data : ++d.data;
}


That looks like changing d.data and then assigning it to itself.

Possibly (sign == 'minus')? --d.data : ++d.data // ?????????

Complicating the function is not a good approach. It will very probably
result, if other similar functions are needed, in other copies of

if (document.getElementById) {
var d = document.getElementById("number").firstChild;
} else if (document.all) {
var d = document.all["number"].firstChild;
}

One should, if one wants to use getElementById, conditionally implement
it for use in the remainder of the code :-

if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) {
return document.all[id] } }

which can be copy'n'pasted without alteration or put in an include file.

Your code then becomes (untested)

function change_number(sign){
var d = document.getElementById("number").firstChild;
d.data = (sign =='minus')? --d.data : ++d.data;
}

or (untested)

function change_number(delta){
with (document.getElementById("number").firstChild)
data = +data + delta }

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #11

P: n/a


Dr John Stockton wrote:
if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) {
return document.all[id] } }

which can be copy'n'pasted without alteration or put in an include file.
function change_number(sign){
var d = document.getElementById("number").firstChild;
d.data = (sign =='minus')? --d.data : ++d.data;


If you want IE 4 support then you can't use firstChild or data as IE 4
doesn't know those properties at all, there you need to manipulate
innerText.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #12

P: n/a
DU
Dr John Stockton wrote:
JRS: In article <41********@news.broadpark.no>, dated Tue, 11 Jan 2005
20:21:43, seen in news:comp.lang.javascript, Jeff <no****@jo.se> posted :

This works in Internet Explorer, but nothing happens in Mozilla.

Can any bright head here spot what I'm doing wrong? What here might
Mozilla not like?

Don't know, but the code could be simplified :

function change_number(minus_or_plus){

var number = document.getElementById("number");
old_number = parseInt(number.innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerText = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerText = new_number;
}
}


<div style="cursor:hand;" onmousedown="change_number('minus')">-</div>
<div style="cursor:hand;" onmousedown="change_number('plus')">+</div>

BTW, new_number & old_number should have been var; parseInt is safer with
a second parameter, though that's not essential here; parseInt is not
needed (see FAQ).

function change_number(X){
with (document.getElementById("number"))
innerText = +innerText + X }

<div id="number">99</div>
<div style="cursor:hand;" onmousedown="change_number(-1)">-</div>
<div style="cursor:hand;" onmousedown="change_number(+1)">+</div>
That's OK in MSIE 4, after
if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) {
return document.all[id] } }


It's amazing how much people are willing to propose ways to support MSIE
4, which is btw an 8 years old browsers and with 3 major free upgrades
since then, but not propose the DOM 3 textContent attribute which is
supported by recent releases of Mozilla-based browsers.
Whatever the reasoning is, I think it would be consequent to invite MSIE
4 users to upgrade rather than to cater for them endlessly.

DU
Jul 23 '05 #13

P: n/a
JRS: In article <41***********************@newsread2.arcor-online.net>,
dated Sat, 15 Jan 2005 12:31:32, seen in news:comp.lang.javascript,
Martin Honnen <ma*******@yahoo.de> posted :


Dr John Stockton wrote:
if (document.all && !document.getElementById) { // e.g. IE4
document.getElementById = function(id) {
return document.all[id] } }

which can be copy'n'pasted without alteration or put in an include file.


function change_number(sign){
var d = document.getElementById("number").firstChild;
d.data = (sign =='minus')? --d.data : ++d.data;


If you want IE 4 support then you can't use firstChild or data as IE 4
doesn't know those properties at all, there you need to manipulate
innerText.


Agreed. But then I never wrote that one could do that in IE4.

My earlier post in the thread gives a full IE4 solution; that which you
quoted is to illustrate a better way of dealing with the absence of
getElementById.

You have failed to quote what I wrote adequately; you removed two
instances of "untested", which are there because that code cannot be
successfully tested in IE4.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.