How can I change this innerText in Mozilla Firefox?

J

Jeff

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>
 
M

Mick White

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>
Click to expand...

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

Mick
 
Z

Zifud

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

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
 
J

Jeff

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

Mick
Click to expand...

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

Jeff

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

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;
}
Click to expand...

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!
 
D

Dr John Stockton

dated Tue said:
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?
Click to expand...

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;
}
}
Click to expand...
<div style="cursor:hand;" onmousedown="change_number('minus')">-</div>
<div style="cursor:hand;" onmousedown="change_number('plus')">+</div>
Click to expand...

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] } }
 
J

Jeff

Dr said:
Don't know, but the code could be simplified :
Click to expand...
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>
Click to expand...

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!
 
J

Jeff

Al said:
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;
Click to expand...
Click to expand...
I like Zifud's approach with one minor change.
d.data = (sign == 'minus')? --t : ++t;
Click to expand...

Nice detail. And not to forget more estethic!
 
Z

Zifud

Al Jones wrote:
[...]
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.
Click to expand...

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;
}
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Fri, 14
Jan 2005 07:18:23, seen in Zifud
Al Jones wrote:
[...]
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.
Click to expand...

Considering that no validation has been done on the number...
Click to expand...

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;
}
Click to expand...

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 }
 
M

Martin Honnen

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;
Click to expand...

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.
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Sat, 15 Jan 2005 12:31:32, seen in
Martin Honnen said:
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;
Click to expand...

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.
Click to expand...

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.
 
D

DU

Dr said:
JRS: In article <[email protected]>, dated Tue, 11 Jan 2005
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?
Click to expand...


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>
Click to expand...


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] } }
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I add arrows to my FAQ 0
How do I fix this issue in sqaurespace code block? 1
Uhhhhh, What can I do next? 6
How can I add React 18 to existing HTML? 2
CSS: How can I stop overflow on the y-axis? 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
How do I output this recursive function correctly to a web browser? 2
How can I arrange a series of radio buttons? 2

Members online

No members online now.
Total: 243 (members: 1, guests: 242)
Robots: 349

Forum statistics

Threads
474,434
Messages
2,571,689
Members
48,796
Latest member
Greg L.

Latest Threads

Top