Can the code be simplified?

[fulio pen]

I have following page:

http://www.pinyinology.com/test/testGet.html

Part of the code is:

javascript:
document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";

html:

<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>

I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

Fulio Pen

[Josh Sebastian]

Re: Can the code be simplified?

fulio pen wrote:

I have following page:
>

http://www.pinyinology.com/test/testGet.html

>
Part of the code is:
>
javascript:
document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";
>
html:
>
<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>
>
I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

I prefer not to use classes for arbitrary purposes. Rather, I create my own
attribute:

HTML:
<p moon></p>
<p moon></p>
....

Javascript:
var moons = document.getEle mentsByAttribut e("moon");
for(var m=0; m != moons.length; ++m)
moons[m].innerHTML = "moon";

Of course, document.getEle mentsByAttribut e is not a standard function, but a
simple Google search will yield a number of implementations .

--
Josh

[fulio pen]

Re: Can the code be simplified?

On Sep 18, 10:31 pm, Josh Sebastian <sebas...@gmail .comwrote:

fulio pen wrote:

I have following page:

>

http://www.pinyinology.com/test/testGet.html

>

Part of the code is:

>

javascript:
 document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";

>

html:

>

<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>

>

I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

>
I prefer not to use classes for arbitrary purposes. Rather, I create my own
attribute:
>
HTML:
<p moon></p>
<p moon></p>
...
>
Javascript:
var moons = document.getEle mentsByAttribut e("moon");
for(var m=0; m != moons.length; ++m)
  moons[m].innerHTML = "moon";
>
Of course, document.getEle mentsByAttribut e is not a standard function, but a
simple Google search will yield a number of implementations .
>
--
Josh

Josh:

Thanks a lot for your help.

Fulio Pen

[Thomas 'PointedEars' Lahn]

Re: Can the code be simplified?

Josh Sebastian wrote:

fulio pen wrote:

><p id="moon1"></p>
><p id="moon2"></p>
><p id="moon3"></p>
><p id="moon4"></p>
>>
>I wonder whether the code can be simplified, such as <class='moon' in
>the html section, and getElementsByCl ass in the javascript section.
>Thanks for your expertise.

Search the archives for "getElementsByC lass". You are welcome.

<http://jibbering.com/faq/>

I prefer not to use classes for arbitrary purposes. Rather, I create my own
attribute:
>
HTML:

So you prefer *invalid code* over defined microformats?

<p moon></p>
<p moon></p>
...

This is junk, not HTML.

<http://validator.w3.or g/>


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8 300dec7@news.de mon.co.uk>

[SAM]

Re: Can the code be simplified?

fulio pen a écrit :

I have following page:
>

http://www.pinyinology.com/test/testGet.html

>
Part of the code is:
>
javascript:
document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";
>
html:
>
<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>
>
I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

All depends of what you want and how is your html code.

exo 1:
======
<html>
<script type="text/javascript">
window.onload = function() {
var p = document.getEle mentById("moon" ).getElementsBy TagName('P');
for(var i=0, n=p.length; i<n; i++) p[i].innerHTML ="moon";
}
</script>
<body>
<p>exo 1</p>
<div id="moon">
<p></p>
<p></p>
<div>
<p>moom or not ?</p>
</div>
<p></p>
</div>
</body></html>


exo 2 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var p = document.body.g etElementsByTag Name('P');
for(var i=0, n=p.length; i<n; i++) p[i].innerHTML ="moon";
}
</script>
<body>
<p>exo 1</p>
<p></p>
<p></p>
<div>
<p>moom or not ?</p>
</div>
<p></p>
</body></html>



exo 3 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var obj = document.body.f irstChild;
while (obj) {
if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
obj = obj.nextSibling ;
}
}
</script>
<body>
<h1>test</h1>
<p></p>
<form>
<fieldset><lege nd>Fieldset</legend>
example: <input>
</fieldset>
<p><input type="submit"></p>
</form>
<p></p>
<div>
<p>not moon</p>
</div>
<p></p>
</body></html>


exo 4 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var obj = document.getEle mentsByTagName( 'DIV')[0].firstChild;
while (obj) {
if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
obj = obj.nextSibling ;
}
}
</script>
<body>
<h1>test</h1>
<p>not moon</p>
<form>
<fieldset><lege nd>Fieldset</legend>
example: <input>
</fieldset>
<p><input type="submit"></p>
</form>
<p>not moon</p>
<div>
<p></p>
<p></p>
<p></p>
</div>
<p>not moon</p>
</body></html>

--
sm

[Dr J R Stockton]

Re: Can the code be simplified?

On Sep 19, 1:44 am, fulio pen <fulio...@yahoo .comwrote:

document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";

(you could omit the first three of "moon"; )

function Wryt(ID, S) { document.getEle mentById(ID).in nerHTML = S }
// generally useful; in an include file
//...
for (var J=1 ; J<=4 ; J++) Wryt("moon"+J, "moon")

If you have much like that, consider a variant of Wryt using a more
potent getElementBy... .

// Currently, my usual news service is write-only.

--
(c) John Stockton, near London, UK. Posting with Google.
Mail: J.R.""""""""@ph ysics.org or (better) via Home Page at
Web: <URL:http://www.merlyn.demo n.co.uk/>
FAQish topics, acronyms, links, etc.; Date, Delphi, JavaScript, ...

[Josh Sebastian]

Re: Can the code be simplified?

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

Josh Sebastian wrote:
>
So you prefer *invalid code* over defined microformats?

I prefer clean solutions over hacks. Punning the class attribute is a
hack.

<p moon></p>
<p moon></p>
...

>
This is junk, not HTML.
>
<http://validator.w3.or g/>

http://en.wikipedia.org/wiki/Document_Type_Definition

[Thomas 'PointedEars' Lahn]

Re: Can the code be simplified?

Josh Sebastian wrote:

Thomas 'PointedEars' Lahn wrote:

>Josh Sebastian wrote:
>>
>So you prefer *invalid code* over defined microformats?

>
I prefer clean solutions over hacks. Punning the class attribute is a
hack.

Even if so, using invalid markup is not a clean solution at all, especially
not in browser scripting.

<http://diveintomark.or g/archives/2003/05/05/why_we_wont_hel p_you>

>><p moon></p>
>><p moon></p>
>>...

>This is junk, not HTML.
>>
><http://validator.w3.or g/>

>
http://en.wikipedia.org/wiki/Document_Type_Definition

If only you had understood it.


PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

[dhtml]

Re: Can the code be simplified?

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

>Josh Sebastian wrote:
>>
>So you prefer *invalid code* over defined microformats?

>
I prefer clean solutions over hacks. Punning the class attribute is a
hack.
>

The class attribute widely supported. It is something that a developer
can be expected to understand.

However, this:-

>><p moon></p>
>><p moon></p>
>>...

>This is junk, not HTML.
>>

It is not something developer (except the author) can be expected to
understand.

But to the OP's question at hand, I think innerHTML is the wrong choice
here. innerText/textContent is more efficient. The most efficient would
be to set the value of the text node, but this example does not have
text nodes. This can be solved by changing the markup a little.
<p class="moon"</p>

but for some browsers, the whitespace will be dropped, so:-

<p class="moon">&n bsp;</p>

would address the problem for those browsers. Once that's in place, we
can get an array of all elements with class "moon", loop through it, and
set the data for each <ptag's text node.

<script>
var moons = getElementsByCl assName(documen t, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
moons[i].firstChild.dat a = "moon" + i;
</script>

This would require a |getElementsByC lassName| function.

It would be more efficient yet to get the moons like:-

<div id="moons">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<script type="text/javascript">
var moonsDiv = document.getEle mentById('moons '),
moons = moonsDiv.getEle mentsByTagName( 'p');
</script>

Which requires only a tiny bit of JavaScript and is valid markup.

Garrett

[fulio pen]

Re: Can the code be simplified?

On Sep 19, 4:39 pm, dhtml <dhtmlkitc...@g mail.comwrote:

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

Josh Sebastian wrote:

>

So you prefer *invalid code* over defined microformats?

>

I prefer clean solutions over hacks. Punning the class attribute is a
hack.

>
The class attribute widely supported. It is something that a developer
can be expected to understand.
>
However, this:-
>

><p moon></p>
><p moon></p>
>...
This is junk, not HTML.

>
It is not something developer (except the author) can be expected to
understand.
>
But to the OP's question at hand, I think innerHTML is the wrong choice
here. innerText/textContent is more efficient. The most efficient would
be to set the value of the text node, but this example does not have
text nodes. This can be solved by changing the markup a little.
<p class="moon"</p>
>
but for some browsers, the whitespace will be dropped, so:-
>
<p class="moon">&n bsp;</p>
>
would address the problem for those browsers. Once that's in place, we
can get an array of all elements with class "moon", loop through it, and
set the data for each <ptag's text node.
>
<script>
var moons = getElementsByCl assName(documen t, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
   moons[i].firstChild.dat a = "moon" + i;
</script>
>
This would require a |getElementsByC lassName| function.
>
It would be more efficient yet to get the moons like:-
>
<div id="moons">
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
</div>
>
<script type="text/javascript">
var moonsDiv = document.getEle mentById('moons '),
     moons = moonsDiv.getEle mentsByTagName( 'p');
</script>
>
Which requires only a tiny bit of JavaScript and is valid markup.
>
Garrett

My sincere thanks to all for your your help. I will study the code
carefully.

fulio

[RobG]

Re: Can the code be simplified?

On Sep 19, 10:44 am, fulio pen <fulio...@yahoo .comwrote:

I have following page:
>

http://www.pinyinology.com/test/testGet.html

>
Part of the code is:
>
javascript:
 document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";
>
html:
>
<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>
>
I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

It depends on what you mean by simplified. The code as written is
pretty simple and would be understood by much anyone with an
understanding of HTML (javascript is not needed), I don't think it
could be any simpler.

If you mean can it be done with less code, that's possible if you
write supporting functions - but that means more code elsewhere.
There are a number of libraries that provide ways to create an array
of elements based on selectors, but you will then be adding a library
of perhaps 5,000 lines of code. And the resulting code would only be
understood by someone who knows that library - a basic understanding
of HTML or scripting would not be sufficient.


--
Rob

[RobG]

Re: Can the code be simplified?

On Sep 19, 11:01 pm, Josh Sebastian <sebas...@gmail .comwrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
>

Josh Sebastian wrote:

>

So you prefer *invalid code* over defined microformats?

>
I prefer clean solutions over hacks. Punning the class attribute is a
hack.

Thomas' suggestion is not a "hack", it is using the class attribute
for a legitimate purpose.


--
Rob

[fulio pen]

Re: Can the code be simplified?

On Sep 19, 7:21 am, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

fulio pen a écrit :
>
>
>

I have following page:

>

http://www.pinyinology.com/test/testGet.html

>

Part of the code is:

>

javascript:
 document.getEle mentById("moon1 ").innerHTM L ="moon";
document.getEle mentById("moon2 ").innerHTM L ="moon";
document.getEle mentById("moon3 ").innerHTM L ="moon";
document.getEle mentById("moon4 ").innerHTM L ="moon";

>

html:

>

<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>

>

I wonder whether the code can be simplified, such as <class='moon' in
the html section, and getElementsByCl ass in the javascript section.
Thanks for your expertise.

>
All depends of what you want and how is your html code.
>
exo 1:
======
<html>
<script type="text/javascript">
window.onload = function() {
var p = document.getEle mentById("moon" ).getElementsBy TagName('P');
for(var i=0, n=p.length; i<n; i++) p[i].innerHTML ="moon";}
>
</script>
<body>
   <p>exo 1</p>
   <div id="moon">
     <p></p>
     <p></p>
     <div>
       <p>moom or not ?</p>
     </div>
     <p></p>
   </div>
</body></html>
>
exo 2 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var p = document.body.g etElementsByTag Name('P');
for(var i=0, n=p.length; i<n; i++) p[i].innerHTML ="moon";}
>
</script>
<body>
   <p>exo 1</p>
   <p></p>
   <p></p>
   <div>
     <p>moom or not ?</p>
   </div>
   <p></p>
</body></html>
>
exo 3 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var obj = document.body.f irstChild;
while (obj) {
   if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
   obj = obj.nextSibling ;
   }}
>
</script>
<body>
   <h1>test</h1>
   <p></p>
   <form>
     <fieldset><lege nd>Fieldset</legend>
       example: <input>
     </fieldset>
     <p><input type="submit"></p>
   </form>
   <p></p>
   <div>
     <p>not moon</p>
   </div>
   <p></p>
</body></html>
>
exo 4 :
=======
<html>
<script type="text/javascript">
window.onload = function() {
var obj = document.getEle mentsByTagName( 'DIV')[0].firstChild;
while (obj) {
   if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
   obj = obj.nextSibling ;
   }}
>
</script>
<body>
   <h1>test</h1>
   <p>not moon</p>
   <form>
     <fieldset><lege nd>Fieldset</legend>
       example: <input>
     </fieldset>
     <p><input type="submit"></p>
   </form>
   <p>not moon</p>
   <div>
     <p></p>
     <p></p>
     <p></p>
   </div>
   <p>not moon</p>
</body></html>
>
--
sm

Hi, sm:

They all work well. I need to study the code carefully. Thanks.

fulio

[fulio pen]

Re: Can the code be simplified?

On Sep 19, 4:39 pm, dhtml <dhtmlkitc...@g mail.comwrote:

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

Josh Sebastian wrote:

>

So you prefer *invalid code* over defined microformats?

>

I prefer clean solutions over hacks. Punning the class attribute is a
hack.

>
The class attribute widely supported. It is something that a developer
can be expected to understand.
>
However, this:-
>

><p moon></p>
><p moon></p>
>...
This is junk, not HTML.

>
It is not something developer (except the author) can be expected to
understand.
>
But to the OP's question at hand, I think innerHTML is the wrong choice
here. innerText/textContent is more efficient. The most efficient would
be to set the value of the text node, but this example does not have
text nodes. This can be solved by changing the markup a little.
<p class="moon"</p>
>
but for some browsers, the whitespace will be dropped, so:-
>
<p class="moon">&n bsp;</p>
>
would address the problem for those browsers. Once that's in place, we
can get an array of all elements with class "moon", loop through it, and
set the data for each <ptag's text node.
>
<script>
var moons = getElementsByCl assName(documen t, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
   moons[i].firstChild.dat a = "moon" + i;
</script>
>
This would require a |getElementsByC lassName| function.
>
It would be more efficient yet to get the moons like:-
>
<div id="moons">
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
</div>
>
<script type="text/javascript">
var moonsDiv = document.getEle mentById('moons '),
     moons = moonsDiv.getEle mentsByTagName( 'p');
</script>
>
Which requires only a tiny bit of JavaScript and is valid markup.
>
Garrett

Hi, Garrett:

Thanks for your help. I put your code in your message into two html
pages, as I wanted to understand them. But neither work. So I uploaded
them to my web site.

First one:

http://www.pinyinology.com/test/moonByG.html

code:

<script type="text/javascript">
var moonsDiv = document.getEle mentById('moons ');
moons = moonsDiv.getEle mentsByTagName( 'p');
</script>

</head>
<body>
<div id="moons">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

2nd one:

http://www.pinyinology.com/test/moonByG2.html

code:

script type="text/javascript">

var moons = getElementsByCl assName(documen t, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
moons[i].firstChild.dat a = "moon" + i;

</script>

</head>
<body>

<p class="moon"</p>
<p class="moon"</p>

<p class="moon">&n bsp;</p>
<p class="moon">&n bsp;</p>
</body>

Could you tell me how to modify the code? Thanks again.

Fulio