Can the code be simplified?

F

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
 
F

fulio pen

fulio said:
I have following page:

Part of the code is:
Click to expand...
javascript:
 document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="moon";

<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>
Click to expand...
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.
Click to expand...

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.
Click to expand...

Josh:

Thanks a lot for your help.

Fulio Pen
 
S

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.
Click to expand...

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.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.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>
 
D

Dr J R Stockton

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

(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.
 
D

dhtml

Josh said:
I prefer clean solutions over hacks. Punning the class attribute is a
hack.
Click to expand...

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

However, this:-

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 <p> tag's text node.

<script>
var moons = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
moons.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
 
F

fulio pen

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

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

However, this:-

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 <p> tag's text node.

<script>
var moons = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
   moons.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
Click to expand...


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

fulio
 
R

RobG

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.
Click to expand...

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.
 
R

RobG

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

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

fulio pen

fulio pen a écrit :


I have following page:

Part of the code is:
Click to expand...
javascript:
 document.getElementById("moon1").innerHTML ="moon";
document.getElementById("moon2").innerHTML ="moon";
document.getElementById("moon3").innerHTML ="moon";
document.getElementById("moon4").innerHTML ="moon";

<p id="moon1"></p>
<p id="moon2"></p>
<p id="moon3"></p>
<p id="moon4"></p>
Click to expand...
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.
Click to expand...

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.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.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>
Click to expand...


Hi, sm:

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

fulio
 
F

fulio pen

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

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

However, this:-

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 <p> tag's text node.

<script>
var moons = getElementsByClassName(document, "moon", "p");
for(var i = 0, len = moons.length; i < len; i++)
   moons.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
Click to expand...


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.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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I output this recursive function correctly to a web browser? 2
I am trying to make an audio player, how do I get the selected file to be playable? 5
What "might" I be doing wrong with this snippet? 6
How do I output a function with a parameter argument? 6
Help with code 0
A simple javascript code not working on Firefox 3
About as basic "Newbie-Question" that you can get. 3
Why doesn't the function get called? 1

Members online

No members online now.
Total: 39 (members: 2, guests: 37)
Robots: 464

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top