JavaScript... -sigh-

intellix · 16 Mar 2009 at 17:02

Why is it JavaScript is never as simple as it seems? :S
Hate it

Struggling to get this to work... even though im kinda confused as to why its not... reading up and stuff and this SEEMS like it should work

window.onload = function() {
var links = document.getElementById('resources').getElementsByTagName('li').getElementsByTagName('a');
var n = links.length;
for (var i = 0; i < n; i++) {
if (links.title && links.title != '') {
// add the title to anchor innerhtml
links.innerHTML += '<span>'+links.title+'</span>';
links.title = ''; // remove the title
}
}
}

html structure is:

<div class="navigation">
<ul id="resources">
<li><a href="#" title="whatever">some text</a></li>
</ul>

Thanks, as usual, java is driving me nuts over the most simplest things

Dj_Jestar · 16 Mar 2009 at 17:14

javascript, not java

Seems fine here.. maybe change:

Code:

(links[i].title && links[i].title != '')

to:

Code:

(links[i].title != '')

though.

oh, call the function at the end of the page, instead of window.onload, else it will execute before any of rest of the page is loaded in some browsers.

intellix · 16 Mar 2009 at 17:14

only thing that SEEMS to work is getElementsByTagName('a') but then obviously it applies it to EVERY link in the document :/

intellix · 16 Mar 2009 at 17:18

i've tried changing the ID of one link to res1, then doing this instead:

var links = document.getElementById('res1');

But it doesn't seem to grab it.. aggh I hate Javascript... and when im doing Java I hate that too... nothing seems to work the way you think it would, and everything seems to be DIFFERENT to anything else... iiiiiis it: .text or .carrot?!!?! mauhauha in java we decided on .carrot

stupid example but there you go

Dj_Jestar · 16 Mar 2009 at 17:37

that would be because there is no comparison between JavaScript and Java. The only thing they have in common is they both have the letters J, A, and V in their names.

suarve · 16 Mar 2009 at 17:42

intellix said:
i've tried changing the ID of one link to res1, then doing this instead:

var links = document.getElementById('res1');

But it doesn't seem to grab it.. aggh I hate Javascript... and when im doing Java I hate that too... nothing seems to work the way you think it would, and everything seems to be DIFFERENT to anything else... iiiiiis it: .text or .carrot?!!?! mauhauha in java we decided on .carrot

stupid example but there you go

Have you tired calling the script at the end of the page?

intellix · 16 Mar 2009 at 18:32

doesn't work.... basically the only way to get JavaScript working is to throw my laptop out of the window. Jobs a good un

Dj_Jestar · 16 Mar 2009 at 18:41

at a guess it's because HTMLCollection doesn't like getElementsByTagName()

give all the links a class and use getElementsByClassName() instead.

Code:

<html>
  <body onload="onLoad()"><div class="navigation">
<ul id="resources">
<li><a class="foo" href="#" title="whatever">some text</a></li>
</ul>
<button onclick="onLoad()" label="foo" />
<script type="text/javascript">
	/*<![CDATA[*/
	function onLoad() {
		var links = document.getElementsByClassName('foo');
		var n = links.length;
		for (var i = 0; i < n; i++) {
			if (links[i].title && links[i].title != '') {
				// add the title to anchor innerhtml
				links[i].innerHTML += '<span>'+links[i].title+'</span>';
				links[i].title = ''; // remove the title
			}
		}
	} 
	/*]]>*/
</script>
</body>
</html>

works..

SimonCHere · 16 Mar 2009 at 18:45

The problem is that this bit:
document.getElementById('resources').getElementsByTagName('li')
returns an array of 'li' nodes.
so

Code:

var s = document.getElementById('resources').getElementsByTagName('li')[B][COLOR="Red"][0][/COLOR][/B].getElementsByTagName('a');
var n = s.length;

works.

obviously you have to loop around the 'li' nodes array to get all the 'a' nodes from each one but that shouldn't be too hard.

Simon

intellix · 16 Mar 2009 at 18:54

SimonCHere said:
The problem is that this bit:
document.getElementById('resources').getElementsByTagName('li')
returns an array of 'li' nodes.
so

Code:

var s = document.getElementById('resources').getElementsByTagName('li')[B][COLOR="Red"][0][/COLOR][/B].getElementsByTagName('a'); var n = s.length;

works.

obviously you have to loop around the 'li' nodes array to get all the 'a' nodes from each one but that shouldn't be too hard.

Simon

I tried just haing by ID('res1') and making one of the ID as res1 for one single link... didn't work whatsoever, tried your code but im not really sure how I have to implement it anyways... think im gonna leave it anyways... Thanks for your help

SimonCHere · 16 Mar 2009 at 18:54

And because I'm bored

Code:

window.onload = function() {

var s = document.getElementById('resources').getElementsByTagName('li');

for (var i = 0; i < s.length; i++) {
  var a=s[i].getElementsByTagName('a');
  for (var j = 0; j < a.length; j++) {
    if (a[j].title != ''){
      a[j].innerHTML += '<span>'+a[j].title+'</span>';
      a[j].title = '';
    }
  }
}
}

Shoseki · 16 Mar 2009 at 18:58

Use something like prototype, seriously - get elements by etc is nuts in this day and age...

intellix · 16 Mar 2009 at 19:19

Thank you so much, the code you gave me worked great... I really need to start from scratch learning JavaScript (same with Java for uni) than jump into the stuff like this cause I can never figure out WHY something doesn't work...

I want to kiss you guys for your help

suarve · 17 Mar 2009 at 01:47

intellix said:
Thank you so much, the code you gave me worked great... I really need to start from scratch learning JavaScript (same with Java for uni) than jump into the stuff like this cause I can never figure out WHY something doesn't work...

I want to kiss you guys for your help

Look at something like JQuery or prototype. Esp JQuery - really like that