Scrolling through ajax created list

[flagman5]

hello all

I have these 2 simple functions: (just focusing on down arrow for now,
cuz i think up arrow would just reverse)

function down_arrow()
{
var cursor = getCursor();
var parent = document.getElementById("search_suggest");

if (cursor != -1)
{
if (cursor == parent.childNodes.length)
parent.childNodes[0].style.backgroundColor = "#3366CC";
else if (cursor < parent.childNodes.length - 1)
{
parent.childNodes[cursor].style.backgroundColor = "";
parent.childNodes[cursor + 1].style.backgroundColor = "#3366CC";
}
}
}
function getCursor()
{
if (document.getElementById("search_suggest").innerHTML.length == 0)
return -1;

var parent = document.getElementById("search_suggest");

for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes.style.backgroundColor == "#3366CC") {
return i;
}
}

return parent.childNodes.length;
}

I got this code off the web and am trying to modify it without any
success. basically from what i understand, the getCursor function gets
the element in the webpage, and cycles through all the childNodes of
the element to see which child has the background color of #3366CC,
indicating which childNode has been selected. then it goes to the
down_arrow() function where if nothing is selected, getCursor would
have returned the length of the childNodes and thus make the first
child to be selected, and if the function works, it is suppose to
continue from where the current child is selected. for some reason
this isnt working, i have found out that getCursor always returns the
length of the childNodes, it never goes into the if-statement checking
the background color (indicating which child is selected)

any help would be appreciated.

thanks

 

[SAM]

flagman5 a écrit :

function getCursor()
{
if (document.getElementById("search_suggest").innerHTML.length == 0)
return -1;

var parent = document.getElementById("search_suggest");

for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes.style.backgroundColor == "#3366CC") {
return i;
}
}
return parent.childNodes.length;
}

That can't work because browsers memorizes colors in rgb(...,..,...)
Try working with a class to colorize and find back the selected element.

parent.childNodes[cursor].className = 'red';

if(parent.childNodes.className=='red') ... blah ...