Hi

i make list box to change the font type, font color, font size and bacground color in listbox

this is what i made so far

<html>

<head>

<!--Function to do the background color-->
<script language="JavaScript">
var backColor = new Array(); // don't change this
backColor[0] = 'red';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

<!--Function to do the font color-->
<script language="JavaScript">
var fontColor = new Array(); // don't change this
fontColor[0] = 'red';
fontColor[1] = '#00FF00';
fontColor[2] = '#0000FF';
fontColor[3] = '#FFFFFF';

function changefont(whichColor){
document.fgColor = fontColor[whichColor];
}
</script>

<!--Function to do the font type-->
<script language="JavaScript">
var fontType = new Array(); // don't change this
fontType[0] = 'Arial';
fontType[1] = 'Verdana';
fontType[2] = 'Tahoma';

function changetype(whichType){
document.fontFamily = fontType[whichColor];
}
</script>


<!--Function to do the font size-->
<script language="JavaScript">
var fontSize = new Array(); // don't change this
fontSize[0] = '12';
fontSize[1] = '14';
fontSize[2] = '16';
fontSize[3] = '18';

function changesize(whichSize){
document.fontWeight = fontSize[whichSize];
}
</script>






</head>

<body>

<form>

<center>

<!--<option value ="">Backgroun Color</option>-->
<select OnClick="location.href=this.options[this.selectedIndex].value">
<option value = "javascript:changeBG(0);">Red 
<option value = "javascript:changeBG(1);">Green
<option value = "javascript:changeBG(2);">Blue
<option value = "javascript:changeBG(3);"> White 
</select>

<!--<option value ="">Font Color</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changefont(0);">Red Font
<option value = "javascript:changefont(1);">Green Font
<option value = "javascript:changefont(2);">Blue Font
<option value = "javascript:changefont(3);">White Font
</select>

<!--<option value ="">Font Size</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changetype(0);">Arial
<option value = "javascript:changetype(1);">Verdana
<option value = "javascript:changetype(2);">Tahoma
</select>

<!--<option value ="">Font Type</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changesize(0);">12
<option value = "javascript:changesize(1);">14
<option value = "javascript:changesize(2);">16
<option value = "javascript:changesize(3);">18
</select>





</br>
BLA BLA BLA test font




<input type=button value="Go!" onClick="javascript:changeBG(this)">

</form>

</body>

</html>

the only one that works just the background color

can u guys help me with this?

thank you

Recommended Answers

All 7 Replies

well since background works, why not use the same location.href? You are also making use of deprecated code, you might want to rethink how you are changing the properties.

it is not working
i can change the font type using button click
but i cannot use combo box

<a onClick=document.getElementById('hey').style.fontFamily='verdana'> Make it VERDANA!!!</a>

this code change the text with <body id=hey>

and then the text inside body change

but i cannot get the font style into the combobox(listbox)

what makes you think there is such a thing as document.fontFamily?
as I said, make sure you are using up-to-date and correct properties.

You can try this one...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title>Demo</title>
      <style type="text/css">
/* <![CDATA[ */
html, body {
   min-width: 800px;
   max-width: 1024px;
   width: auto;
}

body {
   background-color: #fff;
   color: #000;
   font: 80% Arial, sans-serif;
   text-align: center;
}

div { border: 0; margin: 0; padding: 0; }

body #wrapper {
   margin: 0 auto;
   max-width: 1000px;
   width: 100%;
}

div #tube {
   background-color: #FF4500;
   color: #000;
   clear: both;
   float: left;
   border: 1px solid #000;
   position: relative;
}

div #l-side {
   background-color: #F80;
   color: #000;
   float: left;
   width: 25%;
}

div #rside {
   float: right;
   width: 75%;
}

div.pad {
   margin: 0 auto;
   padding-left: 1em; 
   position: relative;
   text-align: left;
}
div select { width: 93%;  }
/* ]]> */
      </style>
      <script type="text/javascript">
/* <![CDATA[ */

function bg(colour) {
layout = document.getElementsByTagName('div');
layout['tube'].style.backgroundColor = colour;
}

function fc(colour) {
layout['tube'].style.color = colour;
}

function cf(thisSize) {
document.body.style.fontSize = thisSize;
}

function ff(thisAttribute) {
document.body.setAttribute('style',thisAttribute);
}
function demo() {
var form = document.forms['frm'];   
var opt = form.lst.options;

switch(form.lst.selectedIndex)
{ 
case 0 : bg(opt[0].value); break;
case 1 : bg(opt[1].value); break;
case 2 : fc(opt[2].value); break;
case 3 : fc(opt[3].value); break; 
case 4 : cf(opt[4].value); break;
case 5 : cf(opt[5].value); break;
case 6 : ff(opt[6].value); break;
case 7 : ff(opt[7].value); break;
  default : alert('And Now We\'re done!'); }

}

document.onchange = demo;
/* ]]> */
</script>
   <link rev="start" href="./" title="Essential's Demo&#8482;" />
   </head>
   <body>
      <div id="wrapper">
         <div id="tube">
            <div id="l-side">
               <div class="pad">
                  <form action="javascript:void(0);" id="frm">
                     <div>
                        <select name="lst" size="1">
                           
<optgroup  label="Background Color">
                              <option value="#F40" selected="selected">Red</option>
                              <option value="#F80">Orange</option>

</optgroup>                  
                           
<optgroup  label="Font Color">
                              <option value="#000">Black</option>
                              <option value="#FFF">White</option>

</optgroup>                  

<optgroup  label="Font Size">
                              <option value="80%">80% percent</option>
                              <option value="160%">160% percent</option>

</optgroup>                  
                           
<optgroup  label="Font Family">
                              <option value="font-family:'Trebuchet MS'">Trebuchet MS</option>
                             <option value="font-family:Verdana">Verdana</option>

</optgroup>                  
                           
                                                                     
                        </select>
                     </div>
                  </form>
               </div>
            </div>
            <div id="rside">
               <div class="pad">
                  <h3>JavaScript Demo</h3>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

to essential

the code you gave me is not working

it does not change the background and the font

i try to put text under div id="tube" but nothing happened

can you help me please

thank you

But its working fine with me! What's your browser?

commented: awesome you give me the basic idea thx alot man +1

internet explorer 7

well thank you for your help anyway

i try to modify it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.