How can I change this innerText in Mozilla Firefox?

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(m inus_or_plus){

var number = document.getEle mentById("numbe r");
old_number = parseInt(number .innerText);

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

</script>
</head>
<body>

<div id="number">99 </div>
<div style="cursor:h and;" onmousedown="ch ange_number('mi nus')">-</div>
<div style="cursor:h and;" onmousedown="ch ange_number('pl us')">+</div>

</body>
</html>

Jul 23 '05 #1

Subscribe Reply

13139

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(m inus_or_plus){

var number = document.getEle mentById("numbe r");
old_number = parseInt(number .innerText);

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

</script>
function change_number(m inus_or_plus){
d=document.getE lementById("num ber").firstChil d.data;
document.getEle mentById("numbe r").firstChild. data =arguments[0]=='plus'?
+d+1:d-1;
}

Mick </head>
<body>

<div id="number">99 </div>
<div style="cursor:h and;" onmousedown="ch ange_number('mi nus')">-</div>
<div style="cursor:h and;" onmousedown="ch ange_number('pl us')">+</div>

</body>
</html>

Jul 23 '05 #2

Zifud

Mick White wrote:
[...]

function change_number(m inus_or_plus){
d=document.getE lementById("num ber").firstChil d.data;
document.getEle mentById("numbe r").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(s ign){
var d = document.getEle mentById("numbe r").firstChi ld;
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

Jeff wrote:

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

var number = document.getEle mentById("numbe r");
old_number = parseInt(number .innerText);

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

Mick White wrote:
function change_number(m inus_or_plus){
d=document.getE lementById("num ber").firstChil d.data;
document.getEle mentById("numbe r").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

Jeff

Zifud wrote:

Mick White wrote:
[...]

function change_number(m inus_or_plus){
d=document.getE lementById("num ber").firstChil d.data;
document.getEle mentById("numbe r").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(s ign){
var d = document.getEle mentById("numbe r").firstChi ld;
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

Dr John Stockton

JRS: In article <41********@new s.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(m inus_or_plus){

var number = document.getEle mentById("numbe r");
old_number = parseInt(number .innerText);

if (minus_or_plus === 'minus'){
new_number = (old_number - 1);
number.innerTex t = new_number;
} else if (minus_or_plus === 'plus'){
new_number = old_number + 1;
number.innerTex t = new_number;
}
} <div style="cursor:h and;" onmousedown="ch ange_number('mi nus')">-</div>
<div style="cursor:h and;" onmousedown="ch ange_number('pl us')">+</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.getEl ementById("numb er"))
innerText = +innerText + X }

<div id="number">99 </div>
<div style="cursor:h and;" onmousedown="ch ange_number(-1)">-</div>
<div style="cursor:h and;" onmousedown="ch ange_number(+1) ">+</div>
That's OK in MSIE 4, after
if (document.all && !document.getEl ementById) { // e.g. IE4
document.getEle mentById = function(id) {
return document.all[id] } }

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

Jul 23 '05 #6

Jeff

Dr John Stockton wrote:

JRS: In article <41********@new s.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.getEl ementById("numb er"))
innerText = +innerText + X }

<div id="number">99 </div>
<div style="cursor:h and;" onmousedown="ch ange_number(-1)">-</div>
<div style="cursor:h and;" onmousedown="ch ange_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

Al Jones

On Wed, 12 Jan 2005 00:55:33 GMT, Zifud <Zi***@hotmail. com> wrote:

Mick White wrote:
[...]
function change_number(m inus_or_plus){
d=document.getE lementById("num ber").firstChil d.data;
document.getEle mentById("numbe r").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(s ign){
var d = document.getEle mentById("numbe r").firstChi ld;
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

Jeff

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

Zifud

Al Jones wrote:
[...]

function change_number(s ign){
var d = document.getEle mentById("numbe r").firstChi ld;
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(s ign){
if (document.getEl ementById) {
var d = document.getEle mentById("numbe r").firstChi ld;
} else if (document.all) {
var d = document.all["number"].firstChild;
}
d.data = (sign =='minus')? --d.data : ++d.data;
}

--
Zif

Jul 23 '05 #10

Similar topics

8986

setting text, change the font

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 </i></b>

Javascript

23945

Way(s) to dynamically change text content

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: document.getElementById("example").style.fontColor="#ff0000"; But what way(s) are there to change the actual text content itself on the page dynamically, from "Text text text" to"Bla bla bla" ?

Javascript

4761

IFrame innerText FireFox

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 to use the getter approach and want to just get the innerText as follows: var childS = iframe.contentWindow.document.body.childNodes; for(var i=0; i<childS.length; i++) { if(childS.nodeType==1) text+= childS.tagName=="BR" ? '\n' :...

Javascript

6753

Realtime change textarea wrap

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 (https://bugzilla.mozilla.org/show_bug.cgi?id=302710), FireFox does not listen to the textarea.wrap = 'soft' command. Because I want the script to be cross-browser compatible, someone suggested to remove and immediately add a node to the DOM, so I now have: ...

Javascript

10633

Change class style

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

Javascript

9522

Problem with innerText/textContent

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 = document.getElementById("uniText"); outputArea.innerText = transformInput(inputArea.value); -- I have two elements, a textarea in which user entered RTS text, and a div tag in which the converted Unicode text will be place using

Javascript

6697

firefox IE different, innerText question

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 9 my qustion is

Javascript

1923

change the download settings using javascript.

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 to be downloaded . and the browser gives the download window ,like.., save file or open file etc.. as we generally see. i want the browser to ask the location to the user .. as to where he

Javascript

3448

srcElement and innerText and?

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 (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1); if (visCnt) visCnt.innerText=taObj.value.length; }

Javascript

7928

Changing the language in Windows 10

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8415

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8405

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8060

The easy way to turn off automatic updates for Windows 10/11

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6735

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

3903

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3951

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2430

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1514

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP