Javascript
This is an archived, read-only copy of the United-TI subforum , including posts and topic from May 2003 to April 2012. If you would like to discuss any of the topics in this forum, you can visit Cemetech's Calculator Programming subforum. Some of these topics may also be directly-linked to active Cemetech topics. If you are a Cemetech member with a linked United-TI account, you can link United-TI topics here with your current Cemetech topics.

This forum is locked: you cannot post, reply to, or edit topics. General Coding and Design => Calculator Programming
Javascript
United-TI Archives -> General Coding and Design
 
    »
» View previous topic :: View next topic  
Author Message
bananaman
Indestructible


Calc Guru


Joined: 12 Sep 2005
Posts: 1124
Posted: 12 Sep 2008 01:29:32 pm    Post subject:
Hey guys,

I am trying to use javascript to make it so that when the user changes what is inside a select box it updates the background color of a certain table cell.

Here is my current code that doesn't work...

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Java Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" language="javascript">
function changeColor (select) {
 if (document.getElementById) {

  switch (select.options[newLoc.selectedIndex].value;
)
  {
   case 5:
    document.getElementById('backgroundImage').className='white';
    break;
   case 6:
    document.getElementById('backgroundImage').className='gray';
    break;
   default:
   document.getElementById('backgroundImage').className='white';
  }
 }
}
</script>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<table border="0" width="100%">
<tr>
<td class="gray" id="imageBackground">
Testing
</td></tr>
<tr>
              <td class="main">Color:</td>
              <td class="main"><select name="id[2]" onChange="this.id[2]">
            <option value="5">White</option>
            <option value="6">Gray</option>
           </select></td>
            </tr>
</table>
</body>
</html>

You will also need to know that inside of that included stylesheet is the following...

Code:
.white {background-color: #ffffff; }
.gray {background-color: #bbbbbb; }


I am not very experienced with javascript. I usually try to steer away from it because not everyone has javascript enabled. But right now I am really frustrated because I have spent hours working on this and have gotten no results at all.

Thanks for your help.
Back to top
bananaman
Indestructible


Calc Guru


Joined: 12 Sep 2005
Posts: 1124
Posted: 12 Sep 2008 10:55:02 pm    Post subject:
Conquerage...


Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Java Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" language="javascript">
function changeColor () {
 if (document.getElementById) {
  switch (document.getElementById('colorSwitch').selectedIndex)
  {
   case 0:
    document.getElementById('imageBackground').className='white';
   break;
   case 1:
   document.getElementById('imageBackground').className='gray';
   break;
   default:
   document.getElementById('imageBackground').className='white';
    break;
   }
 }
}
</script>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<table border="0" width="100%">
<tr>
<td class="gray" id="imageBackground">
Testing
</td></tr>
<tr>
              <td class="main">Color:</td>
              <td class="main"><select id="colorSwitch" name="id[2]" onChange="changeColor()">
            <option value="5">White</option>
            <option value="6">Gray</option>
           </select></td>
            </tr>
</table>
</body>
</html>


My biggest problem was a typo. I never gave an id to the select option. I only gave it a name. I think my second approach will also make it easier for me to add new colors when the time comes.
Back to top
benryves


Active Member


Joined: 23 Feb 2006
Posts: 564
Posted: 14 Sep 2008 08:23:07 am    Post subject:
Glad you got it working. Smile For future reference, a nice JavaScript framework (such as MooTools) can make life easier (getting around various minor browser differences) and allow for more elegant code.
Back to top
Display posts from previous:   
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Javascript
    »
» View previous topic :: View next topic  
Page 1 of 1 » All times are UTC - 5 Hours

 

Advertisement