The color change functions are functional in IE9 and Firefox, but may not be compatible with earlier versions of IE or Chrome

A JavaScript function is used to change the colors of CSS rendered images in Internet Explorer 9 and Firefox. Is there a workaround for this issue or is it related to the code on the page? You can see this in action at .

    <!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";
}

// More functions for changing colors

        </script>

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


    </head>

    <body>

 //these are the css images//

        <style type="text/css">

        // CSS styles for images and colors

        </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">

        // Form for selecting board type

                
</div>

Answer №1

This response may not cover every angle of the issue, as the question posed lacks specific details. However...

It appears that the key is to utilize the onchange event for the SELECT element, rather than relying on onclick for the OPTION elements within the SELECT.

For reference, here is a jsfiddle demo:

  • Set 1 will generate a message box in Chrome and Firefox
  • Set 2 will only display a message box in Firefox (based on the versions used)

(Unfortunately, testing in IE was not conducted)

Update: If open to implementing jQuery and expanding your skill set, here's an additional jsfiddle demo that includes color selection as desired.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating real-time data into your nodeJS and express applications

I am currently utilizing express for managing all the routing in my web application. Additionally, I have integrated firebase to store my data. For organization purposes, I decided to divide my code as follows: index.js: This file serves as the main node ...

Add a fresh item to a list using jQuery

Attempting to add a new list item using jQuery. In this scenario, the process works well, but when attempting to retrieve the value of an input field using .val(), no list item is created. http://www.example.com Code snippet: $(document).ready(functi ...

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

What is the best way to align the last two items at the bottom of the screen?

Incorporating kendo controls and aiming to align the split button and button at the bottom of the div, I'm encountering difficulties achieving this. How can I eliminate the top gap? Even with attempts like setting margin-top and padding-top as 0, the ...

Unable to locate element using document.getElementById in ASP.NET form

Currently, I am working on a project to create an ASP.NET webforms page that will showcase a Google map using the Google Maps JavaScript API with multiple markers. Everything is functioning smoothly as long as I don't place <div id="map-canvas"> ...

Designing a Curved Stepper Component in the Shape of an S

I've been attempting to create a custom stepper component with an S-curve shape using React, but so far I haven't been successful. I even tried utilizing the MUI Stepper component and experimented with pure HTML and CSS, but couldn't achieve ...

What is the best way to initiate a saga for an API request while another call is currently in progress?

During the execution of the first action in saga, the second action is also being called. While I receive the response from the first action, I am not getting a response from the second one. this.props.actions.FetchRequest(payload1) this.props.actions.F ...

Tips for accessing a RESTful web service using an AJAX call

I am having trouble calling my REST web service using AJAX. The URL for my service is ''. I can successfully call this service from a REST client in the Firefox browser, but when I try to call it from AJAX, I get an error. Here is my AJAX call : ...

Tips for capturing the current terminal content upon keypress detection?

After successfully installing the terminal on a test page, I am looking to highlight matching parentheses within it. This is similar to what is done in this example: I have a working solution in place and now need to integrate it with the terminal. ...

Troubleshooting problem with Webpack and TypeScript (ts-loader)

Seeking help to configure SolidJS with Webpack and ts-loader. Encountering an issue with return functions. What specific settings are needed in the loader to resolve this problem? import { render } from "solid-js/web"; const App = () => { ...

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

I am currently working on a corporate website and have been tasked with creating a unique design for a specific page. The design includes the following elements: A body background gradient that transitions from their primary color to white in a top-to-bot ...

What is the best way to connect input values with ngFor and ngModel?

I am facing an issue with binding input values to a component in Angular. I have used ngFor on multiple inputs, but the input fields are not showing up, so I am unable to push the data to subQuestionsAnswertext. Here is the code snippet from app.component ...

Angular Functions and Their Application

Just starting out with Angular and facing a challenge with handling downloaded JSON data. I wrote this function: for (var i = 0; i < $scope.Objects.length; i++){ $http.get($scope.Objects[i]["Commit"]).success(function(data) { Commit = data ...

Javascript and iframes may encounter compatibility issues with browsers other than Internet Explorer

My HTML file includes an iframe and JavaScript that function correctly in IE Browser, but they do not work in other browsers such as Safari and Firefox. When using Safari, only the iframe box is displayed without showing the content inside it. I am curio ...

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

Convert a Twitter Direct Message Link by changing the `<button>` tag to an `<a>` tag

When you log into Twitter and have Direct Message enabled, a "Send Message" button will appear. Can someone please provide the URL for sending a DM to a specific user? I tried looking at the code but I could use some assistance. Any thoughts? Thank you in ...

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...

Using AngularJS to auto-populate additional fields after selecting an option from the typeahead autocomplete feature

Just starting with AngularJS and finally figured out how to implement Auto-complete in Angularjs. Now, when a user selects a value from the auto-complete, I want other fields to be populated based on that selection. For example, upon loading the screen, d ...

retrieve the information from a specific field within the store and store it in an array

Perhaps this is a question that pertains to using pure JavaScript, but for some reason I can't seem to figure it out. I am currently working on extjs4.2 using Sencha Architect and have received a JSON response from the server in the following format: ...