CODEWITHSUNDEEP
javascriptasp.netcsshtml
Jed
Jed

Reputation: 1733

Javascript Problems in Firefox but not in IE Debugging problems VIsual Studio 2010

Help I'm very new with web developing using ASP.NET. Why is the my web app does not give the desired output like IE does when debugging my code below:

<!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">
<head>
<title></title>
<style type="text/css">
    h1{color:Blue}
    h2{color:Red}

</style>
<script type="text/javascript">
    function ShowColor() {
        alert("You selected " + SelectColor.value);
        BodyContent.style.backgroundColor = SelectColor.value;
    }
</script>
</head>
<body>
<div id="BodyContent">
    <h1>HelloWorld</h1>
    <h2>Welcome</h2>
    <p>
    This is my first Web Page</p>
    <hr />
    Please select color:
    <select id="SelectColor">
        <option value="white">white</option>
        <option value="yellow">yellow</option>
        <option value="silver">silver</option>
    </select>
    <input id="ButtonColor" type="button" value="Select" onclick="ShowColor()" />
</div>

</body>
</html>

Problem is that FF does not executes the javascript "ShowColor" when i clicked the Select button but IE does.

enter image description here

    function ShowColor() {
        alert("You selected " + SelectColor.value);
        BodyContent.style.backgroundColor = SelectColor.value;
    }

Upvotes: 0

Views: 361

Answers (2)

jacqijvv
jacqijvv

Reputation: 880

Your javascript function should be as follows:

function ShowColor() {
    alert("You selected " + document.getElementById("SelectColor").value);
    document.body.style.backgroundColor = document.getElementById("SelectColor").value;
}

You need to select the actual elements by using javascript. For example document.gelElementById("id of element"), and then change the documents color. This should work in any browser.

The function now shows the appropriate selected value and actually changes the background of the webpage.

Upvotes: 3

ahaliav fox
ahaliav fox

Reputation: 2257

try this:

<script type="text/javascript">
var selected;
function alertselected(selectobj) {
    selected = selectobj.selectedIndex;
}

function ShowColor() {
    alert("You selected " + selected);
    elm = document.getElementById("sample");
    document.getElementById("BodyContent").style.backgroundColor = elm.options[elm.selectedIndex].value;
}

html:

<div id="BodyContent"><select id="sample" onChange="alertselected(this)">option>white</option><option>yellow</option><option>silver</option>


<input id="ButtonColor" type="button" value="Select" onclick="ShowColor()" /></div>

Upvotes: 1

Related Questions