Switching between different fonts...

[tlendz]

Hi,

I've got several divs with the same id/name, and text inside (font-
family:georgia,serif), and would like the users to be able to change
the font, in case they don't like the default one. I have come up with
this code, however it updates the divs' style only once, to 'arial',
whereas I would like them to be switched to 'times new roman',
'verdana', back to 'georgia', and so on. All with consecutive click on
a single link:

<a href="javascript:fontnew();\>Change Font</a>>

function fontnew() {
var div;
var newfamily;
if (!done) { var done; }
done = 0;
if (!newfamily) { newfamily = 'georgia,serif'; }

if (done==0 && newfamily == 'georgia,serif') { newfamily = 'arial';
done = 1; }
if (done==0 && newfamily == 'arial') { newfamily = 'times new roman';
done = 1; }
if (done==0 && newfamily == 'times new roman') { newfamily =
'verdana'; done = 1; }
if (done==0 && newfamily == 'verdana') { newfamily ==
'georgia,serif'; done = 1; }
var divs = document.getElementsByName('M');
for (i = 0; i < divs.length; i++) {
div = divs;
div.style.fontFamily = newfamily;
}
}

Any suggestions?

Take care!

 

[tlendz]

From the looks of your code, you

are using the name attribute and not the ID though.

Actually I'm using both ID and NAME attributes in all my DIVs (e.g.
<div id='M' name='M'...). This is the only way I could get the script
to work in FF and IE (I tried with the CLASS attribute, couldn't get
it to perform though).

Assign them a class and modify the CSS rules or change the className.
Search the archives for some examples of modifying the className property.

The reason I'd prefer to change only fontFamily, rather than the
class, is because I'd like later to add another link that plays with
fontSize only, keeping fontFamily (the user was playing with)
unchanged.

If you set done to 0 every time the function enters how can you expect
it to ever be anything but 0?

I set it to 1 right after changing the value of newfamily to the new
fontFamily, depending on what was stored in newfamily previously. I do
it to avoid changing the value of newfamily several times. Even being
a beginner, it seems logical to me. I just don't know why it works
only once, with the first click, as if the value of newfamily after a
click (and changing fontFamily in all the DIVs) was being forgotten,
rather than used in the function next time (I need that state to know
what font is displayed at the moment, and what font should be shown
next time the user clicks).

if (done==0 && newfamily == 'georgia,serif') { newfamily = 'arial';
done = 1; }
if (done==0 && newfamily == 'arial') { newfamily = 'times new roman';
done = 1; }
if (done==0 && newfamily == 'times new roman') { newfamily =
'verdana'; done = 1; }
if (done==0 && newfamily == 'verdana') { newfamily ==
'georgia,serif'; done = 1; }

var divs = document.getElementsByName('M');
for (i = 0; i < divs.length; i++) {
div = divs;
div.style.fontFamily = newfamily;
}

Thanks for the FAQ!

still fighting...

Thomas