|  | Can the code be simplified? | | |
| | | fulio pen |  |
|  Posted: Fri Sep 19, 2008 12:44 am Post subject: Can the code be simplified? |  |
I have following page:
LINK
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 | |
| | Posted: Fri Sep 19, 2008 12:44 am Post subject: Re: Can the code be simplified? | |
fulio pen wrote:
| Quote: | I have following page:
LINK
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 | |
| | Posted: Fri Sep 19, 2008 6:10 am Post subject: Re: Can the code be simplified? | |
| |  | |
On Sep 18, 10:31 pm, Josh Sebastian <sebas...@gmail.com> wrote:
| Quote: | fulio pen wrote:
I have following page:
LINK
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 | |
| | Posted: Fri Sep 19, 2008 7:59 am Post subject: Re: Can the code be simplified? | |
Josh Sebastian wrote:
| Quote: | 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/>
| Quote: | I prefer not to use classes for arbitrary purposes. Rather, I create my own
attribute:
HTML:
|
So you prefer *invalid code* over defined microformats?
| Quote: | 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, <f806at$ail$1$8300dec7@news.demon.co.uk> |
| |
| | | SAM | |
| | Posted: Fri Sep 19, 2008 9:21 am Post subject: Re: Can the code be simplified? | |
| | | |
fulio pen a écrit :
| Quote: | I have following page:
LINK
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").getElementsByTagName('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 |
| |
| | | Thomas 'PointedEars' Lahn | |
| | Posted: Fri Sep 19, 2008 11:07 am Post subject: Re: Can the code be simplified? | |
Josh Sebastian wrote:
| Quote: | 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>
| Quote: | p moon></p
p moon></p
...
This is junk, not HTML.
LINK
LINK
|
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 |
| |
| | | Dr J R Stockton | |
| | Posted: Fri Sep 19, 2008 12:54 pm Post subject: Re: Can the code be simplified? | |
On Sep 19, 1:44 am, fulio pen <fulio...@yahoo.com> wrote:
| Quote: | 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 | |
| | Posted: Fri Sep 19, 2008 1:01 pm Post subject: Re: Can the code be simplified? | |
On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
| Quote: | Josh Sebastian wrote:
So you prefer *invalid code* over defined microformats?
|
I prefer clean solutions over hacks. Punning the class attribute is a
hack.
| Quote: | p moon></p
p moon></p
...
This is junk, not HTML.
LINK
|
LINK |
| |
| | | dhtml | |
| | Posted: Fri Sep 19, 2008 6:39 pm Post subject: Re: Can the code be simplified? | |
| | | |
Josh Sebastian wrote:
| Quote: | On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@web.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:-
| Quote: | 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"> </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 <p> tag'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> </p>
<p> </p>
<p> </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 | |
| | Posted: Fri Sep 19, 2008 11:25 pm Post subject: Re: Can the code be simplified? | |
| | | |
On Sep 19, 4:39 pm, dhtml <dhtmlkitc...@gmail.com> wrote:
| Quote: | Josh Sebastian wrote:
On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <PointedE...@web.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"> </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 <p> tag'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> </p
<p> </p
<p> </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 |
| |
| Page 1 of 2 .:. Goto page 1, 2 Next | |
|
|
