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.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass in the javascript section.
Thanks for your expertise.

Fulio Pen

[Josh Sebastian]

fulio pen wrote:

I have following page:

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

Part of the code is:

javascript:
document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass 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.getElementsByAttribute("moon");
for(var m=0; m != moons.length; ++m)
moons[m].innerHTML = "moon";

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

--
Josh

[fulio pen]

On Sep 18, 10:31*pm, Josh Sebastian <[e-mail]:

fulio pen wrote:

I have following page:

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

Part of the code is:

javascript:
*document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass 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.getElementsByAttribute("moon");
for(var m=0; m != moons.length; ++m)
* moons[m].innerHTML = "moon";

Of course, document.getElementsByAttribute 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]

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 getElementsByClass in the javascript section.
Thanks for your expertise.

Search the archives for "getElementsByClass". 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.org/>
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, <f8*******************@news.demon.co.uk>

[SAM]

fulio pen a écrit :

I have following page:

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

Part of the code is:

javascript:
document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass 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.getElementById("moon").getElementsByTagNa me('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.getElementsByTagName('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.firstChild;
while (obj) {
if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
obj = obj.nextSibling;
}
}
</script>
<body>
<h1>test</h1>
<p></p>
<form>
<fieldset><legend>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.getElementsByTagName('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><legend>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]

On Sep 19, 1:44*am, fulio pen <[e-mail]:

document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="moon";

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

function Wryt(ID, S) { document.getElementById(ID).innerHTML = 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.""""""""@physics.org or (better) via Home Page at
Web: <URL:http://www.merlyn.demon.co.uk/>
FAQish topics, acronyms, links, etc.; Date, Delphi, JavaScript, ...

[Josh Sebastian]

On Sep 19, 4:59*am, Thomas 'PointedEars' Lahn <[e-mail]>
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.org/>

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

[Thomas 'PointedEars' Lahn]

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.org/archives/2003/05/05/why_we_wont_help_you>

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

This is junk, not HTML.

<http://validator.w3.org/>

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

If only you had understood it.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

[dhtml]

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <[e-mail]>
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">&nbsp;</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 = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
moons[i].firstChild.data = "moon" + i;
</script>

This would require a |getElementsByClassName| 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.getElementById('moons'),
moons = moonsDiv.getElementsByTagName('p');
</script>

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

Garrett

[fulio pen]

On Sep 19, 4:39*pm, dhtml <[e-mail]:

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <[e-mail]>
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">&nbsp;</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 = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
* *moons[i].firstChild.data = "moon" + i;
</script>

This would require a |getElementsByClassName| 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.getElementById('moons'),
* * *moons = moonsDiv.getElementsByTagName('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]

On Sep 19, 10:44*am, fulio pen <[e-mail]:

I have following page:

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

Part of the code is:

javascript:
*document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass 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]

On Sep 19, 11:01*pm, Josh Sebastian <[e-mail]:

On Sep 19, 4:59*am, Thomas 'PointedEars' Lahn <[e-mail]>
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]

On Sep 19, 7:21*am, SAM <[e-mail]>
wrote:

fulio pen a écrit :

I have following page:

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

Part of the code is:

javascript:
*document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="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 getElementsByClass 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.getElementById("moon").getElementsByTagNa me('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.getElementsByTagName('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.firstChild;
while (obj) {
* *if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
* *obj = obj.nextSibling;
* *}}

</script>
<body>
* *<h1>test</h1>
* *<p></p>
* *<form>
* * *<fieldset><legend>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.getElementsByTagName('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><legend>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]

On Sep 19, 4:39*pm, dhtml <[e-mail]:

Josh Sebastian wrote:

On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <[e-mail]>
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">&nbsp;</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 = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
* *moons[i].firstChild.data = "moon" + i;
</script>

This would require a |getElementsByClassName| 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.getElementById('moons'),
* * *moons = moonsDiv.getElementsByTagName('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.getElementById('moons');
moons = moonsDiv.getElementsByTagName('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 = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
moons[i].firstChild.data = "moon" + i;

</script>

</head>
<body>

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

<p class="moon">&nbsp;</p>
<p class="moon">&nbsp;</p>
</body>

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

Fulio