The following color change functions work fine in IE9 and Firefox but not in earlier IE or Chrome

Question

The following function change JavaScript code colors in the CSS rendered images, it is only working in IE9 and Firefox. Is there a hack for this or is it something in the code page? This can be seen at http://www.cornholeny.com/c_y_b_arrowhead.php.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

       <title>ARROWHEAD DESIGN</title>

        <link href="css/structure.css" rel="stylesheet" type="text/css" />
        <link href="css/design.css" rel="stylesheet" type="text/css" />

 
            <!--[if lte IE 7]>
        <link href="" rel="stylesheet" type="text/css" />
            <![endif]-->

        <?php
         include('includes/meta.php');
         ?>

        <style type="text/css">

            div#menu {
          width: 880px;
        height: 65px;
          float: top;
              margin:0px
            }

        div#main {
         margin-left: 0%;
         margin-right: 0%;
         margin-top: 1px;
         padding: 10px;
             }

        div#footer {
         padding: 15px;
         margin: 0px;
         border-bottom: thin solid #000000;
               }
        </style>

//these are the functions that are activated by select options//

    <script type="text/javascript">

function colorchange1()
{

document.getElementById("box-a").style.backgroundColor="grey";

document.getElementById("box-a2").style.backgroundColor="grey";
}


function colorchange2()
{

document.getElementById("box-a").style.backgroundColor="orange";

document.getElementById("box-a2").style.backgroundColor="orange";


}


function colorchange3()
{

document.getElementById("box-a").style.backgroundColor="yellow";

document.getElementById("box-a2").style.backgroundColor="yellow";
}


function colorchange4()
{

document.getElementById("box-a").style.backgroundColor="#6DE91B";

document.getElementById("box-a2").style.backgroundColor="#6DE91B";
}


function colorchange5()
{

document.getElementById("box-a").style.backgroundColor="blue";

document.getElementById("box-a2").style.backgroundColor="blue";
}


function colorchange6()
{

document.getElementById("box-a").style.backgroundColor="brown";

document.getElementById("box-a2").style.backgroundColor="brown";
}


function colorchange7()
{

document.getElementById("box-a").style.backgroundColor="red";

document.getElementById("box-a2").style.backgroundColor="red";
}


function colorchange8()
{

document.getElementById("box-a").style.backgroundColor="white";

document.getElementById("box-a2").style.backgroundColor="white";
}


function colorchange9()
{

document.getElementById("box-a").style.backgroundColor="black";

document.getElementById("box-a2").style.backgroundColor="black";
}


function colorchange10()
{

document.getElementById("box-a").style.backgroundColor="pink";

document.getElementById("box-a2").style.backgroundColor="pink";
}


function changearrow1()
{

document.getElementById("arrow").style.borderBottomColor="grey";

document.getElementById("arrow2").style.backgroundColor="grey";

document.getElementById("arrow-a").style.borderBottomColor="grey";

document.getElementById("arrow-a2").style.backgroundColor="grey";


}


function changearrow2()
{

document.getElementById("arrow").style.borderBottomColor="orange";

document.getElementById("arrow2").style.backgroundColor="orange";

document.getElementById("arrow-a").style.borderBottomColor="orange";

document.getElementById("arrow-a2").style.backgroundColor="orange";


}


function changearrow3()
{

document.getElementById("arrow").style.borderBottomColor="yellow";

document.getElementById("arrow2").style.backgroundColor="yellow";

document.getElementById("arrow-a").style.borderBottomColor="yellow";

document.getElementById("arrow-a2").style.backgroundColor="yellow";


}


function changearrow4()
{

document.getElementById("arrow").style.borderBottomColor="#6DE91B";

document.getElementById("arrow2").style.backgroundColor="#6DE91B";
document.getElementById("arrow-a").style.borderBottomColor="#6DE91B";

document.getElementById("arrow-a2").style.backgroundColor="#6DE91B";

}


function changearrow5()
{

document.getElementById("arrow").style.borderBottomColor="blue";

document.getElementById("arrow2").style.backgroundColor="blue";

document.getElementById("arrow-a").style.borderBottomColor="blue";

document.getElementById("arrow-a2").style.backgroundColor="blue";


}


function changearrow6()
{

document.getElementById("arrow").style.borderBottomColor="brown";

document.getElementById("arrow2").style.backgroundColor="brown";

document.getElementById("arrow-a").style.borderBottomColor="brown";

document.getElementById("arrow-a2").style.backgroundColor="brown";

}


function changearrow7()
{

document.getElementById("arrow").style.borderBottomColor="red";

document.getElementById("arrow2").style.backgroundColor="red";
document.getElementById("arrow-a").style.borderBottomColor="red";

document.getElementById("arrow-a2").style.backgroundColor="red";

}


function changearrow8()
{

document.getElementById("arrow").style.borderBottomColor="white";

document.getElementById("arrow2").style.backgroundColor="white";
document.getElementById("arrow-a").style.borderBottomColor="white";

document.getElementById("arrow-a2").style.backgroundColor="white";

}


function changearrow9()
{

document.getElementById("arrow").style.borderBottomColor="black";

document.getElementById("arrow2").style.backgroundColor="black";

document.getElementById("arrow-a").style.borderBottomColor="black";

document.getElementById("arrow-a2").style.backgroundColor="black";

}

function changearrow10()
{

document.getElementById("arrow").style.borderBottomColor="pink";

document.getElementById("arrow2").style.backgroundColor="pink";

document.getElementById("arrow-a").style.borderBottomColor="pink";

document.getElementById("arrow-a2").style.backgroundColor="pink";

}
        </script>



        <?php
         include('includes/header-menu.php');
         ?>


    </head>

    <body>

 //these are the css images//

        <style type="text/css">


#container { 
    width: 785px; 
    height: 450px;
    background-color: #D9F3CF;
    margin-left: auto;
    margin-right: auto;
    padding: 15px; 
    position: relative;

}

#boardleft { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:left; 
}


#boardright { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:right; 
}


#circle{
    border:none;
    background-color: #D9F3CF;
    width:45px;
    height:45px;
    border-radius:50%;
    top:30px;
    left:52.5px;
    position: absolute;
}

#box-a {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: absolute;
}

#box-a2 {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: relative
}

#arrow2 {
        width: 30px;
    height:150px;


    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

#arrow-a2 {
        width: 30px;
    height:150px;


    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow-a {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

    p.numbers_black {
        color: black;
        text-align: center;
        font-size: 20pt;
        }

    p.numbers_white {
        color: white;
        text-align: center;
        font-size: 20pt;
    
    }

#colorchart { 
    width: 325px; 
    height: 130px;
    background-color: #D9F3CF;
    position: absolute;
    bottom: 8px;
    left: 245px;
}

#box-grey {

        width: 65px;
    height:65px;

    background-color: grey;

        border: none;

    position: relative;
    float: left;
}

#box-orange {

        width: 65px;
    height:65px;

    background-color: orange;

        border: none;

    position: relative;
    float: left;
}

#box-yellow {

        width: 65px;
    height:65px;

    background-color: yellow;

        border: none;

    position: relative;
    float: left;
}

#box-green {

        width: 65px;
    height:65px;

    background-color: #6DE91B;

        border: none;

    position: relative;
    float: left;
}

#box-blue {

        width: 65px;
    height:65px;

    background-color: blue;

        border: none;

    position: relative;
    float: left;
}

#box-brown {

        width: 65px;
    height:65px;

    background-color: brown;

        border: none;

    position: relative;
    float: left;
}

#box-red {

        width: 65px;
    height:65px;

    background-color: red;

        border: none;

    position: relative;
    float: left;
}

#box-white {

        width: 65px;
    height:65px;

    background-color: white;

        border: none;

    position: relative;
    float: left;
}

#box-black {

        width: 65px;
    height:65px;

    background-color: black;

        border: none;

    position: relative;
    float: left;
}

#box-pink {

        width: 65px;
    height:65px;

    background-color: pink;

        border: none;

    position: relative;
    float: left;
}
        </style>
    <h1>YOU HAVE CHOOSEN THE ARROWHEAD DESIGN</h1><br><br>

            If you are viewing this page using<br>
            Internet Explorer 8 or earlier,<br>
            please except or apologies.<br>
            We are aware that the painting function<br>
            is not working in these browsers and we<br>
            are working on the problem.<br>
                Thank You!<br><br><br>

                        

        <h2><b>NOW CHOOSE YOUR TYPE OF BOARDS</b></h2> 

        <br>
    <br>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">



<input type="hidden" name="on0" value="BOARD TYPE">

<select name="os0">

    <option value="REGULATION SIZE">REGULATION SIZE ( Most common - also used for tournament play) $85.00 USD</option>

    <option value="TOURNAMENT STYLE">TOURNAMENT STYLE ( All four sides closed when set up ) $130.00 USD</option>
    <option value="MEDIUM SIZE">MEDIUM SIZE (1/2 scale 12&quot; x 24&quot; - comes with ten 3&quot; bags) $45.00 USD</option>

    <option value="MINI BOARDS">MINI BOARDS  ( 6&quot; x 12&quot; Table Top - with ten 1-1/2&quot; bags) $30.00 USD</option>

</select>
<input type="hidden" name="on1" value="BOARD DESIGN">

<input type="hidden" name="os1" value="ARROWHEAD">

        <br>
    <br>


        <h2>NOW, LET'S PAINT YOUR BOARDS</h2><br>
        <h1><font style="color: red">Please use the color chart below.</font></h1>

        <br>
    <br>

                <div id="container">

        <div id="boardleft">

                <div id="box-a">

    <span Id="arrow">


    
</span>




    <span Id="arrow2">


    
</span>


            <div Id="circle">

                
</div>
            </div>


        
</div>





    <span id="boardleft">

    <b><u><h3>FIELD 1 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on2" value="FIELD 1 COLOR">      

<h3>
<select name="os2">

<option name="os2" value="">
<option name="os2" value="GREY" onclick="colorchange1()"> 1</option>

<option name="os2" value="ORANGE" onclick="colorchange2()"> 2</option>

<option name="os2" value="YELLOW" onclick="colorchange3()"> 3</option>

<option name="os2" value="GREEN" onclick="colorchange4()"> 4</option>

<option name="os2" value="BLUE" onclick="colorchange5()"> 5</option>

<option name="os2" value="BROWN" onclick="colorchange6()"> 6</option>

<option name="os2" value="RED" onclick="colorchange7()"> 7</option>

<option name="os2" value="WHITE" onclick="colorchange8()"> 8</option>

<option name="os2" value="BLACK" onclick="colorchange9()"> 9</option>

<option name="os2" value="PINK" onclick="colorchange10()">10</option>

</select>
</h3>

    </span>

        <div id="boardright">


                <div id="box-a2">

    <span Id="arrow-a">


    
</span>




    <span Id="arrow-a2">


    
</span>



            <div Id="circle">

                
</div>
            </div>


        
</div>




    <span id="boardright">

    <b><u><h3>FIELD 2 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on3" value="FIELD 2 COLOR">


<h3>
<select name="os3">


<option name="os3" value="">
<option name="os3" value="GREY"  onclick="changearrow1()"> 1</option>
 
<option name="os3" value="ORANGE"  onclick="changearrow2()"> 2</option>
 
<option name="os3" value="YELLOW"  onclick="changearrow3()"> 3</option>
 
<option name="os3" value="GREEN"  onclick="changearrow4()"> 4</option>
 
<option name="os3" value="BLUE"  onclick="changearrow5()"> 5</option>
 
<option name="os3" value="BROWN"  onclick="changearrow6()"> 6</option>
 
<option name="os3" value="RED"  onclick="changearrow7()"> 7</option>
 
<option name="os3" value="WHITE"  onclick="changearrow8()"> 8</option>
 
<option name="os3" value="BLACK"  onclick="changearrow9()"> 9</option>
 
<option name="os3" value="PINK"  onclick="changearrow10()">10</option>
  

</select>
</h3>
    </span>

        <span id="colorchart">




            <div id="box-grey"><p class="numbers_black">1</p></div>
            <div id="box-orange"><p class="numbers_black">2</p></div>
            <div id="box-yellow"><p class="numbers_black">3</p></div>
            <div id="box-green"><p class="numbers_black">4</p></div>
            <div id="box-blue"><p class="numbers_white">5</p></div>
            <div id="box-brown"><p class="numbers_white">6</p></div>
            <div id="box-red"><p class="numbers_black">7</p></div>
            <div id="box-white"><p class="numbers_black">8</p></div>
            <div id="box-black"><p class="numbers_white">9</p></font></div>
            <div id="box-pink"><p class="numbers_black">10</p></div>

          </span>


                
</div>

Welcome to Stack Overflow. I don't know what the problem is, but I will say that your code would be _much_ neater if you had _one_ `colorChange(c)` function that took a parameter to indicate what colour is required. Either pass it the `value` attribute from the selected option element, or a string with the required colour. — nnnnnn, Aug 28 '12 at 21:17
Please trim your HTML/CSS/JavaScript to the smallest amount possible to demonstrate your problem. Also, bonus points if you provide a link to your code on http://jsfiddle.net/ or http://jsbin.com/ so that we can alter the code without saving it to our computers. — Heretic Monkey, Aug 28 '12 at 21:23
Hey Mike, I'm kinda new to all this so please forgive my ignorance. — Corn Hole LI, Aug 29 '12 at 13:23
Like hitting enter there, lol. anyway, here is aa link to jsfiddle http://jsfiddle.net/jamdad/ycY5N/ . I know what you mean about having one function to handle the color change but I haven't quite figured out the code for that so for simplicity sake on my end I did it this way.. as far as onclick vs onchange, there was a reason i used onclick but i can't remember why. i think onchange didn't work in IE or something like that. I'll check again. thanks for any help with this!! — Corn Hole LI, Aug 29 '12 at 13:36

Ben · Accepted Answer · 2012-08-29T17:13:30.280

1

This may not be a complete answer as the question, as stated, hasn't narrowed down the problem much. Nonetheless...

At least part of the problem is that you want to use the onchange event for your SELECT element, rather than onclick on the OPTION elements within the SELECT.

Here's a link to a jsfiddle demo:

Set 1 will display a message box in Chrome and Firefox
Set 2 will only display a message box in Firefox (at least in the versions I'm using)

(Sorry, didn't test IE)

Update: If you're willing to use and learn jQuery, here's another jsfiddle demo that does color selection as I think you want it to.

edited Aug 29 '12 at 17:13

answered Aug 29 '12 at 02:52

Ben

494
3
9

@user1630983 per your comment, "there was a reason i used onclick but i can't remember why. i think onchange didn't work in IE or something like that" - you may want to look into something like [jQuery](http://jquery.com/) to worry less about browser-specific behavior. A library like jQuery hides many differences between browsers - and also provides many other benefits once you learn it. – Ben Aug 29 '12 at 14:07
As far as narrowing down the problem, the color change events do not work in versions of IE earlier then 9 nor do the work in CHROME I haven't tested in netscape. also, the css circle appears as a square in Chrome and early IE. JSLINT says javascript is valid so I'm thinking all the problems or in the css. could that be?????? – Corn Hole LI Aug 29 '12 at 14:42
OK, tried changing onclick to onchange and it it does not work in any browser FF IE or CHROME. hmmmmm – Corn Hole LI Aug 29 '12 at 16:07
Did you put the onchange attribute on the SELECT element rather than the OPTION element? The [jsfiddle demo](http://jsfiddle.net/afSh3/) works correctly in the versions of Firefox, Chrome, _and_ Internet Explorer that I am using. – Ben Aug 29 '12 at 16:59
ok, call me dumb and it's ok, but I don't know how to write it so select element gets the option values so it will put in the right color, javascript is new to me. html is still a bit weak! – Corn Hole LI Aug 29 '12 at 20:36
to user1392745 Thank you very much for the jquery suggestion!!! I took your fiddle and changed a bit tweeked it a little to fit my needs and it is working great. I still need to learn a lot but I'm getting there thanks to the help here. Just one more thing, the css circle still appears as a square in IE 8 and I can't, for the life of me, figure out why. any thoughts on that?? I'll post a link to fiddle for my new code with jquery in a little while. – Corn Hole LI Aug 30 '12 at 14:23
Great - nice to see the progress! The CSS property "border-radius" is not supported by IE8. See **[this post](http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie)**. Quick friendly suggestion though: Stackoverflow is really intended for individual, isolated questions; not so much for ongoing discussion threads like this one is turning into! I do hope you get all the behavior you're looking for, but I don't think I can work through all the issues here with you in this one thread. – Ben Aug 30 '12 at 23:41
I understand. I used PIE and it worked for the circle issue. Thank you very much for all the help. You do know your "stuff" and I learned a lot from Stack and you! – Corn Hole LI Aug 31 '12 at 12:38

The following color change functions work fine in IE9 and Firefox but not in earlier IE or Chrome

1 Answers1