Javascript loop

louie · #1 (**permalink**) 01-02-2008, 03:56 PM

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 · #2 (**permalink**) 01-02-2008, 06:09 PM

Could you use something like:

PHP Code:

  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 Code:

  <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 · #3 (**permalink**) 01-02-2008, 06:18 PM

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 · #4 (**permalink**) 01-02-2008, 06:54 PM

So I did misunderstand!

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

HTML Code:

    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 · #5 (**permalink**) 01-02-2008, 07:24 PM

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 · #6 (**permalink**) 01-02-2008, 07:28 PM

Where's the onClick event being triggered?

davkell · #7 (**permalink**) 01-02-2008, 07:30 PM

Quote:

Originally Posted by louie

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

louie · #8 (**permalink**) 01-02-2008, 07:39 PM

there is a link to see what I am talking about:

Alloy Wheels Ireland | New & Seconhand Tyres Fitment - Car Parts Ireland

is not an emergency but i love to have it done is just doing my head-in at the moment and can not put my finger on the situation. I need a break.

davkell · #9 (**permalink**) 01-02-2008, 08:06 PM

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

louie · #10 (**permalink**) 01-02-2008, 08:14 PM

That did it. Thanks man. my hat to you.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
javascript	7aken	Coding Help	1	03-04-2007 03:50 PM
javascript help	7aken	Coding Help	2	20-02-2007 05:09 AM
Javascript menu bug?	ButtermilkJack	Coding Help	1	15-01-2007 02:21 PM
Javascript Captcha for use on forms	louie	Coding Help	8	23-10-2006 09:22 AM
Javascript Menu Help (again...)?	ButtermilkJack	Coding Help	18	25-04-2006 12:32 PM

Javascript loop

Javascript loop

Similar Threads