Jump to content

Script Not Working In Ie


Recommended Posts

Last night I verified my code using the W3 verification and thought everything was okay, until I checked my site in IE. The main problem is the innerHTML with the drop down boxes. The idea is to select the boxes, and based on the input, the text would change to whatever was selected (for example, Monday at 7PM). I looked at the site in IE, but it leaves a blank when I do it. This works fine in Firefox. So I wanted to know if anything in the code is off, or if I need to add something else in order for it to work in IE. Thanks!

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"><style type="text/css">@charset "utf-8";/* style sheet for index.html *//*Image from iStockphoto.com*/body {	    color: #ddaa44;    background-image: url("Images/back.png");    background-position: right;    background-repeat: repeat-y;	    background-color:#9D3326;	    font-family: Verdana, Geneva, sans-serif;}	    h1 {font-size: 18px;}p {	    font-size: 12px;	    color: #ffccaa;}.background {	    background-color: aa5533;}#container	    { float: left;	    width:900px;	    height:300px;	    }#container 2	    {float:left;	    width:1000px;	    height:500px;}a:link {color:#ff8800; text-decoration:none; underline; }a:active {color: #ff8800; text-decoration: underline; }a:visited {color: #0000bb; text-decoration: underline; }a:hover {color: #ffccaa; text-decoration: none; }#container{		 float:left;		 width:900px;		 height:300px}#navigation{	    float: left;	    width: 100px;        height:120px;	    background: clear;	    position:static;	    border-style:solid;	    border-width:2px;	    border-color:#ddaa44;	    margin:5px;	    padding-top:10px;	    padding-bottom:20px;	    padding-left:20px;	    padding-right:20px;}#words{	    float: left;	    width: 500px;	    height:350px;	    background: clear;	    position:static;	    border-style:solid;	    border-width:2px;	    border-color:#ddaa44;	    margin:5px;	    padding-top:2px;	    padding-bottom:20px;	    padding-left:20px;	    padding-right:20px;    overflow:auto;}#sidebox{	    float: left;	    width: 150px;	    height:350px;	    background: clear;	    position:static;	    border-style:solid;	    border-width:2px;	    border-color:#ddaa44;	    margin:5px;	    padding-top:10px;	    padding-bottom:10px;	    padding-left:10px;	    padding-right:10px;    overflow:auto;}#footer{	    clear: both;	    background: clear;	    margin:-1;    }</style><title>Rosa's Kitchen Mexican Restaurant</title><meta name="description" content="mexican restaurant"><meta name="keywords" content="restaurant, mexican, mexican restaurant/> <meta content="><script type="text/javascript">function changeText(){		var userInput = document.getElementById('selDays').value;		var userInput2 = document.getElementById('selTimes').value;		document.getElementById('text1').innerHTML = userInput;		document.getElementById('text2').innerHTML = userInput2;		return false;								}</script><style type="text/css">div.c1 {text-align: center}</style></head><body><img src="Images/logo-tinyY.png" alt="Rosa's Kitchen logo" width="353" height="142"><h1>Welcome to Rosa's Kitchen Mexican Restaurant!</h1><div id="container"><div id="navigation">Home<br><a href="menu.html">Menu</a> <a href="catering.html">Catering</a> <a href="specials.html">Specials</a> <a href="map.html">Location</a> <a href="contact.html">Contact</a>  <p> </p>  </div><div id="words"><p>At our restaurant, we serve the most authentic and freshest Mexican dishes in the Valley! We offer varied dishes from tacos to fajitas, as well as tempting desserts and amazing drinks.</p><p>Please refer to the side menu for navigation.<p>Website requires CSS, Javascript, and pop-ups enabled for full functionality<p><img src="Images/stock-photo-15573992-hacienda-yaxcopoil.jpg" alt="The outside of our restaurant" width="343" height="219"></p></div><div id="sidebox"><h4>Make a Reservation!</h4><p><label>Name: <input type="text" id="fname" name="fname"></label><br><label>Phone: <input type="text" id="phone" name="phone"></label><br><label>Email: <input type="text" id="email" name="email"></label><br></p><form name="frmDays" method="get" action="#" onsubmit="return changeText()" id="frmDays"><select name="selDays" id="selDays"><option>Select a Day</option><option>Monday</option><option>Tuesday</option><option>Wednesday</option><option>Thursday</option><option>Friday</option><option>Saturday</option></select></form><form name="frmTimes" method="get" action="#" onsubmit="return changeText()" id="frmTimes"><select name="selTimes" id="selTimes"><option>Select a Time</option><option>10 AM</option><option>11 AM</option><option>12 PM</option><option>1 PM</option><option>2 PM</option><option>3 PM</option><option>4 PM</option><option>5 PM</option><option>6 PM</option><option>7 PM</option><option>8 PM</option><option>9 PM</option><option>10 PM</option></select> <input type="submit" value="Send"><p>Your reservation is <strong id='text1'>Day</strong> at <strong id='text2'>Time</strong></p></form></div><div id="footer"><div class="c1"><a href="http://validator.w3.org/check?uri=referer"><img		  src="http://www.w3.org/Icons/valid-xhtml10"		  alt="Valid XHTML 1.0!" height="31" width="88" /></a> ©2011 Rosa's Kitchen</div></div></div></body>

Edited by onedear
Link to post
Share on other sites

do you mean the w3c validation service? There are errors in that markup. Are you having trouble getting it to display in IE, or to function in IE? I think what you want is to use is an onchange event on the dropdown to get the value of the selected index, which you can then use to put into the innerHTML of another element.

Link to post
Share on other sites
do you mean the w3c validation service? There are errors in that markup. Are you having trouble getting it to display in IE, or to function in IE? I think what you want is to use is an onchange event on the dropdown to get the value of the selected index, which you can then use to put into the innerHTML of another element.
The page itself displays fine in IE, but the function doesn't work like it's supposed to. I can try the onchange event, and hopefully it will work.
Link to post
Share on other sites

I used the markup validation service, and it passed with this error: "NET-enabling start-tag requires SHORTTAG YES". The only other errors I've gotten are some formatting errors that are within the CSS. I don't understand why the form works fine in Firefox but not IE.

Link to post
Share on other sites

1) You have two form elements to hold two dropdowns, there should only one required to hold both and submit button. 2) Your code is checking for the VALUE of the options, which there are none, but! FF will treat the text as the value, but IE won't. To get it to work in both browsers you would have to use

function changeText(){                 var userInput = document.getElementById('selDays')			    var userInput2 = document.getElementById('selTimes')			    document.getElementById('text1').innerHTML = userInput.options[userInput.selectedIndex].text;			    document.getElementById('text2').innerHTML = userInput2.options[userInput2.selectedIndex].text;return false;}

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...