Javascript loop

Status
Not open for further replies.

louie

New Member
I am looking for a way to change some font style from let's say bold to normal on some text links.
The problem is that I have more than one and they all start with some 2 letter text (example bellow)

Code:
<span id='yr123'>text</span>
<span id='yr1234'>text</span>
<span id='yr46545'>text</span>
<span id='yr897822'>text</span>
I have a js function that onclick will turn the text to bold, 12px, red
but i need to clear the style for all other spans that starts with yr...
Code:
function change_font(what){ 
document.getElementById(what).style.fontSize = "12"; 
document.getElementById(what).style.fontWeight = "bold";
document.getElementById(what).style.color = "#990000";
}

any suggestions?
 

davkell

New Member
Could you use something like:

PHP:
function change_font(what){ 
    var allSpans = document.getElementById("yr").getElementsByTagName("span");
    for(i=0; i < allSpans.length; i++)
    {
        allSpans.item(i).style.fontSize = "30";
    }
    document.getElementById(what).style.fontSize = "10"; 
    document.getElementById(what).style.fontWeight = "bold";
    document.getElementById(what).style.color = "#990000";
}


PHP:
<div id="yr">
    <span id='yr123'>text</span>
    <span id='yr1234'>text</span>
    <span id='yr46545'>text</span>
    <span id='yr897822'>text</span>
</div>

This will reset the styles of all spans, and then set the one chosen....or did I misunderstand what you're trying to do?
 

louie

New Member
It's a good start but is not going to match any id "yr" as they have some numbers picked at random after (e.g. span id='yr5645'
 

davkell

New Member
So I did misunderstand!

Matching the spans that have an id beginning "yr", could be done with:

HTML:
    var allSpans = document.getElementsByTagName("span");
    for(i=0; i < allSpans.length; i++)
    {
        if (allSpans[i].id.substr(0, 2) == "yr")
            // do what ever style changes are needed...

    }
 

louie

New Member
I cann't get my head around it.
all I have is the beginning of the string in this case "yr".
How am i supposed to reference to that particular span?
I tried:
Code:
document.getElementsByTagName("span").style.fontWeight = "normal";
and nothing
 

davkell

New Member
I cann't get my head around it.
all I have is the beginning of the string in this case "yr".
How am i supposed to reference to that particular span?
I tried:
Code:
document.getElementsByTagName("span").style.fontWeight = "normal";
and nothing

Also, that code (getElementsByTagName) returns an array, so you'll need to loop through the array to change the individual elements, rather than than trying to set the style of the array (as you're doing above).
 

davkell

New Member
Will this do it:

Code:
function change_font(what){ 

    var start_of_id = what.substr(0, 2);    /*find out which group of ids it belongs to, for example, "mk" */

    var allSpans = document.getElementsByTagName("span");   // get all span elements
    for(i=0; i < allSpans.length; i++)    // loop through all the span elements
    {
        // identify the ones with starting with an id the same as the one that triggered the event
        if (allSpans[i].id.substr(0, 2) == start_of_id)
        {
            // reset any span elements starting with id="mk" to normal text
            allSpans[i].style.fontWeight = "normal";
            allSpans[i].style.color= "#000";
            allSpans[i].style.fontSize = "12";
        }
    }
    /*  Now all have normal text 
        Next customise the span element with id that was passed to function */
    document.getElementById(what).style.fontSize = "12"; 
    document.getElementById(what).style.fontWeight = "bold";
    document.getElementById(what).style.color = "#990000";
}
I don't know if that's the most efficient way of doing it, as you're looping through all the span elements on the page....but I think it works!!
 

davkell

New Member
Cheers!

No, won't make the 9th unfortunately - you'll have to drink the beer yourself!! - in Galway and have to head to Dublin in the morning....2 weekends in a row is too much for me :)
 
Status
Not open for further replies.
Top