用js改变样式的简单问题！求解！

Html代码：
<html><head><title>Controlling Styles with  JavaScript</title><script language="javascript" type="text/javascript" src="style.js"></script>
</head><body>
    <h1 id="head1">
        Controlling Styles with  JavaScript
    </h1>
    <hr>
    <p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The Change occurs as soon as you change the value of either the drop-down lists in the form.</p>
    <hr>
    <h2 id="he2">This is the H2. So many thing I should to do. So many people I should to care. I want to be single. whenever i meet my real soulmate!</h2>
    <form name="form1">
         <b>Heading color:</b>
         <select name="heading" onchange="changeColor('head1','heading');">
             <option value="black">Black</option>
             <option value="red">Red</option>
             <option value="blue">Blue</option>
             <option value="green">Green</option>
             <option value="yellow">Yellow</option>
         </select>
         <br>
         <b>Body text color:</b>
         <select name="body" onchange="changeColor('p1','body');">
             <option value="black">Black</option>
             <option value="red">Red</option>
             <option value="blue">Blue</option>
             <option value="green">Green</option>
             <option value="yellow">Yellow</option>
         </select>
         <br>
         <b>H2 color:</b>
         <select  name="h2" onchange="changeColor('he2'，'h2');">
             <option value="black">Black</option>
             <option value="red">Red</option>
             <option value="blue">Blue</option>
             <option value="green">Green</option>
             <option value="yellow">Yellow</option>
         </select>
    </form>
</html>
js代码：
// JavaScript Document
function changeColor(para1,para2)
{
     i = document.form1.para2.selectedIndex;
     chColor = document.form1.para2.options[i].value;
     document.getElementById(para1).style.color = chColor;
}想通过改变下拉菜单的选择改变 相应文字段的颜色。不知道哪里出了问题！求教各位！

解决方案 »

  1.   

    try:<html><head><title>Controlling Styles with  JavaScript </title><script type="text/javascript"> 
    function changeColor(para1,para2){
         
        i=para2.selectedIndex;    
        chColor = para2.options[i].value;   
        alert(chColor);
        document.getElementById(para1).style.color = chColor;
    } 
    </script>
    </head><body>
        <h1 id="head1">
            Controlling Styles with  JavaScript
        </h1>
        <hr>
        <p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The Change occurs as soon as you change the value of either the drop-down lists in the form. </p>
        <hr>
        <h2 id="he2">This is the H2. So many thing I should to do. So many people I should to care. I want to be single. whenever i meet my real soulmate! </h2>
        <form name="form1">
            <b>Heading color: </b>
            <select name="heading" onchange="changeColor('head1',this);">
                <option value="black">Black </option>
                <option value="red">Red </option>
                <option value="blue">Blue </option>
                <option value="green">Green </option>
                <option value="yellow">Yellow </option>
            </select>
            <br>
            <b>Body text color: </b>
            <select name="body" onchange="changeColor('p1',this);">
                <option value="black">Black </option>
                <option value="red">Red </option>
                <option value="blue">Blue </option>
                <option value="green">Green </option>
                <option value="yellow">Yellow </option>
            </select>
            <br>
            <b>H2 color: </b>
            <select  name="h2" onchange="changeColor('he2',this);">
                <option value="black">Black </option>
                <option value="red">Red </option>
                <option value="blue">Blue </option>
                <option value="green">Green </option>
                <option value="yellow">Yellow </option>
            </select>
        </form>
    </html> 
    你哪种写法在：document.form1.para2就出错了
      

  2.   

    <html> <head> <title>Controlling Styles with  JavaScript </title> <script language="javascript" type="text/javascript" > 
    function changeColor(para1,para2) 
    { 
        i = document.form1[para2].selectedIndex; 
        chColor = document.form1[para2].options[i].value; 
        document.getElementById(para1).style.color = chColor; 
    } 
    </script> 
    </head> <body> 
        <h1 id="head1"> 
            Controlling Styles with  JavaScript 
        </h1> 
        <hr> 
        <p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The Change occurs as soon as you change the value of either the drop-down lists in the form. </p> 
        <hr> 
        <h2 id="he2">This is the H2. So many thing I should to do. So many people I should to care. I want to be single. whenever i meet my real soulmate! </h2> 
        <form name="form1"> 
            <b>Heading color: </b> 
            <select name="heading" onchange="changeColor('head1','heading');"> 
                <option value="black">Black </option> 
                <option value="red">Red </option> 
                <option value="blue">Blue </option> 
                <option value="green">Green </option> 
                <option value="yellow">Yellow </option> 
            </select> 
            <br> 
            <b>Body text color: </b> 
            <select name="body" onchange="changeColor('p1','body');"> 
                <option value="black">Black </option> 
                <option value="red">Red </option> 
                <option value="blue">Blue </option> 
                <option value="green">Green </option> 
                <option value="yellow">Yellow </option> 
            </select> 
            <br> 
            <b>H2 color: </b> 
            <select  name="h2" onchange="changeColor('he2','h2');"> 
                <option value="black">Black </option> 
                <option value="red">Red </option> 
                <option value="blue">Blue </option> 
                <option value="green">Green </option> 
                <option value="yellow">Yellow </option> 
            </select> 
        </form> 
    </html> 
      

  3.   

    另外，下边的方法里，逗号是全角的，不知道是csdn编辑器的问题，还是楼主写的时候的问题
    <select  name="h2" onchange="changeColor('he2'，'h2');"> 
      

  4.   

    是csdn 的编辑问题
    还想请问下，为什么要用form1[para2]中的[para2]来表示呢？
      

  5.   

    form1.propertyName 访问form1中名为propertyName的属性
    from1[propertyName]访问from1中名为perpertyName这个变量的值的属性
      

  6.   

    因为你传的变量是字符串：form1[para2].selectedIndex
    如果你传的是对象的话  ：参考2楼的写法，para2.selectedIndex