473,390 Members | 1,292 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 software developers and data experts.

How can I change this innerText in Mozilla Firefox?

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
13 13121
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
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
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
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
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
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
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
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
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
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


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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Mr. x | last post by:
Hello, Suppose I have a table like this : <table width = "580"> <tr align = "right" width = 760> <td id = "current_page_inner"> <font size="4" color="lightgreen" face="arial"><b><i> abc...
4
by: michael | last post by:
I have an html text string within a div, eg.: <div id="example">Text text text</div> I know its easy to change styles by using getElementById - for example: ...
2
by: delraydog | last post by:
I know that innerText is not supported in FireFox and I've found the following code fragment which was originally designed in an HTMLElement prototype for an innerText getter. I do not however want...
3
by: Fluffy Convict | last post by:
I am trying to write a script that changes a textarea wrap realtime, basically like you can switch to and from "wordwrap" in Microsofts Notepad. Because of a bug...
3
by: Robert | last post by:
Hi, Is it possible to dynamically change the style of a class instead of just an individual element? If so could you point me in the right direction? Robert
2
by: Srinivasa | last post by:
Hai, I am new to this group. But not to Javascript. I have a problam with innerText in FireFox. I have the code as below. -- var inputArea = document.getElementById("rtsText"); var outputArea =...
11
by: Amzul | last post by:
hello all, i got this code that works fine in IE but not in FF code = obj.innerHTML; document.getElementById('pre').innerText = code; i can make it work in FF like shown here on section...
4
by: Rakhi | last post by:
hello i want to alter the download settings of mozilla firefox browser using javascript of my application !! wat is happenin in my application is, on calling a method , it make a file ready...
5
by: GarryJones | last post by:
To show users how many characters they have left in a TEXTAREA input I have been using "taCount" from a website I googled. function taCount(visCnt) { var taObj=event.srcElement; if...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.