JavaScript - Writing Table Cells And Switch Statements - Javascript

Currently I have the following javascript switch statement ...

Code:

		switch(firstchar){
		   case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9":
		   orderlist[0] += addthis; break;
		   case "a": case "A": orderlist[1] += addthis; break;
		   case "b": case "B": orderlist[2] += addthis; break;
		   case "c": case "C": orderlist[3] += addthis; break;
		   case "d": case "D": orderlist[4] += addthis; break;
		   case "e": case "E": orderlist[5] += addthis; break;
		   case "f": case "F": orderlist[6] += addthis; break;
		   case "g": case "G": orderlist[7] += addthis; break;
		   case "h": case "H": orderlist[8] += addthis; break;
		   case "i": case "I": orderlist[9] += addthis; break;
		   case "j": case "J": orderlist[10] += addthis; break;
		   case "k": case "K": orderlist[11] += addthis; break;
		   case "l": case "L": orderlist[12] += addthis; break;
		   case "m": case "M": orderlist[13] += addthis; break;
		   case "n": case "N": orderlist[14] += addthis; break;
		   case "o": case "O": orderlist[15] += addthis; break;
		   case "p": case "P": orderlist[16] += addthis; break;
		   case "q": case "Q": orderlist[17] += addthis; break;
		   case "r": case "R": orderlist[18] += addthis; break;
		   case "s": case "S": orderlist[19] += addthis; break;
		   case "t": case "T": orderlist[20] += addthis; break;
		   case "u": case "U": orderlist[21] += addthis; break;
		   case "v": case "V": orderlist[22] += addthis; break;
		   case "w": case "W": orderlist[23] += addthis; break;
		   case "x": case "X": orderlist[24] += addthis; break;
		   case "y": case "Y": orderlist[25] += addthis; break;
		   case "z": case "Z": orderlist[26] += addthis; break;
		   default: alert('Illegal Entry'); break;
		}

... that I wish to optimize so that I do not need to write out so many lines of code.

Also, I wish to take into the following as consideration ...
Code:

		   case "aa": case "Aa": case "aA": case "AA": orderlist[1] += addthis; break;

... for each two-character combination. (aa to zz)

Appreciate any help.

My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance

Hello there!

I am completely new to these forums and to programming in general (however, I used to program some games, albeit not very good ones, on a version of BASIC that came with my Playstation 2 about 10 years ago hehe). I have a basic understanding of functions, loops, if/else/switch and an extremely basic understanding of objects/methods. I wanted to consolidate my knowledge by putting it to practical use so I have made a little text adventure game. At the moment it is horrendously non-user-friendly as it has just been me experimenting with functions, if/else statements etc.

Anyway, below is my code and I have two specific questions regarding it (but general answers telling me how I could do things more efficiently OR telling me what I should consider studying would be very appreciate also :)).

Firstly, I have a little inventory object up top and when the player picks up something in the game I change the inv item to "true" so they can use it later (it seemed logical!). I would really love to know how the user could type in "inv" and for their inventory to be shown back to them. i.e. How could I show only the "true" items of an object? I have tried coding this myself but I really am stumped for an answer.

Secondly, you can see in the "north21" function within the "north2" function that I used a series of if/else statements instead of a switch. I would have much prefered to use a switch and then for the case of "go north" have an if/else statement to check if vineclear is true or not (so that they can pass through to the non-existent north3 room). Is this possible? You can use if/else statements within an if/else statement but it seemed when I tried doing that in a switch it didn't like it.

I am running this script through an interpreter to play the "game". I understand that JS probably isn't the best for what I am trying to do, it was more just a "see what I can do" exercise more than anything.

Thanks in advance for your help and please be nice to me, forums scare me generally :D

testgame.txt

I have to attach the code in a txt file as for some reason it wasn't displaying properly when I copied and pasted it here. Apologies!





Reply With Quote




01-17-2015, 08:26 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Briefly: Code:

// based on this:
var inv = {
	sword: false,
	shield: false,
	vines: false
};

// try this:
function displayInventory( )
{
    var list = [ ];
    for ( var item in inv )
    {
        if ( inv[item] == true )
        {
            list.push( item );
        }
    }
    if ( list.length == 0 ) 
    {
        return "You have no items in your inventory";
    }
    return "You have these items in your inventory:<ul><li>"
           + list.join("</li><li>") + "</ul>";
}

My code is designed for display in an HTML page, not for use in clumsy console.log( ) coding. prompt() and alert() and confirm() and document.write() and console.log() should be used ONLY when debugging, not for any real work.

But if you must use console.log, then try this, to replace the code in italics: Code:

    return "You have these items in your inventory: " + list.join(",");

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
		document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
	}

var names = ["Marble","Jarque","Dino","Pineapple"];

function abc(){
	if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
	 else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
	else {names.sort()} 
	document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";

	}

</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>

First time sort: no problem
But when it comes to the blue-highlighted parts
It cannot do the sort().reserve()
What's wrong with the codes?

Hello everyone.
I want to move my image through table cells by using arrow buttons.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}

</style>

</head>

<body onload="setup()">



<script type="text/JavaScript" onkeydown="handleKey(event)">


document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0

 for (var row=0; row<20; row++) {
 document.write('<tr>');
 for (var col=0; col<20; col++) {

idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');

  document.write('</td>');

 }
 document.write('</tr>');


}

function setup() {
row=0;
col=0;
insertKnight(row,col);
}

function handleKey(e) {
if (typeof e !='object') e=window.event;

if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;

case 38:
dC= +1;
dR=0;
break;

case 39:
dC = 0;
dR = +1;
break;

case 40:
dC= 0;
dR=-1;
break;
}

emptyCell(row,col);

function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;

var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}

row +=dR;
col +=dC;

//insert image

insertKnight(row,col);

return false;

function insertKnight(row,col) {

var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);

var colour = cell.className;

if (colour != 'white') {
var knight='cherry.png';
}
else { 
var knight= 'cherry.png';


function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}

cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}


document.getElementById('debug').innerHTML = 'r='+row+' c='+col;

function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>

</body>
</html>

This is my code.
Now i have problems with the eraseImage and drawImage functions. They just don't work.
Any help will be appreciated. Thank you

Hi All,

I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something.
I can open them without table just by document.write(xmlfile location).
Here is my code. please help.

function showResultsTable(searched, srchedname) {
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];

// creates a <table> element and a <tbody> element
mytable = document.createElement("table");
mytable.setAttribute('id', 'resulttable');
mytablebody = document.createElement("tbody");

// creating all cells
var mycurrent_cell = new Array();

for(var j = 0; j < srchedname.length; j++) {
// creates a <tr> element
mycurrent_row = document.createElement("tr");

mycurrent_cell[0] = document.createElement("td");
currenttext = document.createTextNode(j);
mycurrent_cell[0].appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell[0]);


mycurrent_cell[1] = document.createElement("td");
link = document.createElement("a");
link.name = ""+srchedname[j]);
link.href = "C:\\AAA\\TestCasesList.xml";
mycurrent_cell[1].appendChild(link);
mycurrent_row.appendChild(mycurrent_cell[1]);

mycurrent_cell[2] = document.createElement("td");
currenttext = document.createTextNode(searched[j]);
mycurrent_cell[2].appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell[2]);

// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "2");

}

Hello,
I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing.

The paradigm:
I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came.

Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why.

The problem:
The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for.
So the order of the columns and rows are randomized, the data which is then placed into the html/php table.

For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white.
The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with.

We want the information that a cell is filled with to dictate what background-color the cell is.
Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading)
What we want:
Unrandomized: [.A.] [|B|] [#C#]
Randomized: [#C#] [.A.] [|B|]
What the problem is:
Randomized: [.C.] [|A|] [#B#]



Again, thank you for reading this long post. I'm up for any suggestions!

TL;DR
The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells.
How do I make javascript issue a background-color change to each cell according to the information that it is populated with.

Hey.

so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that.

Here is what I have so far:

Code:

function add_new_proj(){
	
	new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
	
	var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
	//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
	
	
	
	var projectID=table.insertCell(0);
	var ProjectName=table.insertCell(1);
	var Client=table.insertCell(2);
	var ClientProjectID=table.insertCell(3);
	var delete_cell=table.insertCell(4);
	
	
	projectID.innerHTML = new_proj_id;
	ProjectName.innerHTML ="";
	Client.innerHTML = "";
	ClientProjectID.innerHTML = "";
	delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
	
	
	
	
}

this is an example of what the cells look like (the ones that already exist, generated via PHP code):

PHP Code:
echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; 


So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event.

any help would be great!

thanks

Hi

I am trying to make all the cells within a table droppable spaces, using the scriptaculous library. However I am not able to do so, and I am not certain why. The table cells are creating within the javascript. I then try to apply the droppables to the table cells through iteration, through the function when the document loads. It does not seem to be working. The document accesses an external php page and has inline php within a div element. I am uncertain if by having the draggable elements instantiated within the php script, that this would be causing any problem, as I cannot see how this would be, the php draggables all appear to be corresponding to the css in the document. Any help with the droppables would be appreciated. I have set up a css class hover, so that when the draggable passes over the droppable the edges of the droppable area should be turning blue, but this is not happening. Not sure what the problem is.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>

  <META name="generator" content="Free Script Editor, see www.freescripteditor.com">

  <TITLE>Email Client</TITLE>
  <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
  <script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/scriptaculous.js" type="text/javascript"></script>
  <script src="javascript/dragdrop.js" type="text/javascript"></script>
  <script src="javascript/controls.js" type="text/javascript"></script>
  <script src="javascript/effects.js" type="text/javascript"></script>

  <script type="text/javascript">
  var xmlhttp = false;

  //check if we are using IE
  try {
       //If the javascript version is greater than 5.
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       alert ("You are using Microsoft Internet Explorer.");
       }
  catch(e)
        {
        //if not, then use the older active x object.
        try  {
        //if we are using Internet Explorer
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        alert("You are using Microsoft Internet Explorer");
              }
  catch (E)
         {
         xmlhttp = false;
         }
        }
        //If we are using a non-IE browser, crea a javascript instance of the object
        if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
           {
           xmlhttp = new XMLHttpRequest();
           alert ("You are not using Microsoft Internet Explorer");
           }

        function getmessage(inbox_id)
                 {
                 var object = document.getElementById('content');
                 var server = "getmessage.php?inbox_id=" +inbox_id;
                 xmlhttp.open("GET", server);
                 xmlhttp.onreadystatechange = function()
                         {
                         if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                            {
                            object.innerHTML = xmlhttp.responseText;
                            }
                         }
                 xmlhttp.send(null);
                 }
        

        function addTable()
                 {
                 var dv = document.getElementById("right");

                 var table = document.createElement("table");
                 var tbody = document.createElement("tbody");
                 var x = 0;
              
                 //create the table rows
                 for(var j =0; j <=2; j++)
                     {
                     var row = document.createElement("tr");

                     //create the table columns
                     for (var k =0; k<=4;k++)
                          {

                          x++;
                          var cell = document.createElement("td");
                          var celltext = document.createTextNode(x);
                          cell.appendChild(celltext);
                          cell.setAttribute("className", "droparea");
                          cell.setAttribute("id", "x");
                          row.appendChild(cell);

                          }
                 //add the row to the end of the table body
                 tbody.appendChild(row);
        }
        table.appendChild(tbody);
        dv.appendChild(table);
        table.setAttribute("className", "tbl");
        }

        document.observe("dom:loaded", function()
                 {
                 var dh;
                 var cells = document.getElementsByTagName('td');
                 for (var z = 0; z <= cells.length; z++)
                      {
                      dh = cells[z].getAttribute('id');
                      if(dh)
                         {
        Droppables.add('dh', {accept:'draggable', hoverclass: 'hover'});
                         }

                      }
                      });
 </script>

</HEAD>

<BODY onload="addTable()">
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<script type="text/javascript" src="buttons/header_nav.js"></script>

</div>
<!-- end of header div-->

<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
  {//start while trainer query
  $inbox_id = $row['0'];
  $to = $row['1'];
  $subject= $row['2'];
  $sent = $row['3'];
  $message = $row['4'];
  $i++;

  echo "<div class='draggable' id='$str$i'>

 $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
 $message</a>
  <script type='text/javascript'>
  new Draggable('$str$i', {scroll: window});

  </script>
  </div>";


  }//end while inbox query
  ?>

</div> <!--end left div-->

<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">

</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
</div>


<!--end content div-->
</div>
</BODY>
</HTML>

So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it.

How can I edit my code to give each cell a different Id? Or is there a better way of doing this?
My table code looks like this (i have filled it with random data so it is not just a blank table).

<code>
<script type="text/javaScript">
window.onload = fnInit;

function fnInit()
{
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBodyam = document.createElement("TBODY");
var oTBodypm = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;

// Declare stock data that would normally be read in from a stock Web site.
var heading = new Array();

heading[0] = "";
heading[1] = "Monday";
heading[2] = "Tuesday";
heading[3] = "Wednesday";
heading[4] = "Thursday";
heading[5] = "Friday";
var block = new Array();

block[0] = "8:30";
block[1] = "9:55";
block[2] = "11:20";
block[3] = "12:45";
block[4] = "2:10";
block[5] = "3:35";
block[6] = "5:00";
block[7] = "6:30";
var stock = new Array();

stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46");
stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46");
stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46");
stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46");
stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46");
stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46");
stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46");
stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46");

// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBodyam);
oTable.appendChild(oTBodypm);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);

// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";

// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.setAttribute("bgColor","lightskyblue");

// Create and insert cells into the header row.
for (i=0; i<heading.length; i++)
{
oCell = document.createElement("TH");
oCell.innerHTML = heading[i];
oRow.appendChild(oCell);
}

// Insert rows and cells into bodies.
for (i=0; i<stock.length; i++)
{
var oBody = (i<3) ? oTBodyam : oTBodypm;
oRow = document.createElement("TR");
oBody.appendChild(oRow);
for (j=0; j<stock[i].length; j++)
{
oCell = document.createElement("TD");
oCell.innerHTML = stock[i][j];
oRow.appendChild(oCell);
}
}
</code>

Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables?

Here is what I have so far:

Code:

function f(tableID){
    var len = document.getElementById(tableID).rows.length;
				
    for(var i = 1; i<len; i++){						
       var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
        credits = c.options[c.selectedIndex].text; 
    }
}

Your help would be really appreciated

Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution.

Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out.
Code:

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
	<td width="20%"><center>Print</center></td>
	<td width="20%"><center>Motion</center></td>
	<td width="20%"><center>Photo</center></td>
	<td width="20%"><center>Misc</center></td>
	<td width="20%"><center>Resume</center></td>
</tr>
<tr>
	 <td colspan="2"><table align="left">
    <td colspan="100%">Catagory 1
    </td>
    <tr>
     <a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
    </tr>        
     <td colspan="100%">Catagory 2
    </td>
    <tr>
          <td><img src="../Jpg/sluticon.jpg" /></td>
       	  <td><img src="../Jpg/sluticon.jpg" /></td>
    </tr>       	
		
	</table></td>
    <td colspan="3">
     <img id="main" src="bowie.jpg" width="400">
    </td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>

OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue.
Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked.

Any help would be awesome!!!!
Thanks!!!!!!

Code:

<html> 
<head><title>menu</title>

<script type="text/javascript"> 
var element = null;

function select(xx) 
{ 
if ( element ) { 
element.style.backgroundColor='gray'; 

} 
element = xx; 
xx.style.backgroundColor='navy'; 

} 
</script>

<style type="text/css"> 
a {text-decoration:none; color:white} 
a:visited {color:white} 
a:active {color:white} 
a:hover {color:white} 
table#lay_menu {width:100%; margin:0px} 
table#lay_menu td {text-align:center; width:20%} 
.menu {text-align:center; background-color:gray; } 
.start {text-align:center; background-color:navy; }
</style> 
</head>

<body> 
<table id="layout">
<tr> 
<td width="188"> 
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td> 
</tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">CPAs</div>
  </a></td>
  </tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">Doctors</div>
  </a>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr> 
</table> 
</body> 
</html>

Hi,

Any help would be greatly appreciated. Below is the javascript that I am having a problem with. The two id's in question are at the end of the javascript. fyi Its for a form.

What will happen is that the user selects the first dropdown with an id of 00N20000001HjsR. They then selects another dropdown with an id of 00N20000001Hp9Q.

What I want is that on the second dropdown, if the user selects the value of Beauty Therapy, it will change the value of the first dropdown (id 00N20000001HjsR) to 'ANCB'.

The problem I have at the moment is that it is not overriding the original dropdown selection. Any ideas on how to solve this?

Much appreciated in advance, thanks!!!


Code:

<script type="text/javascript">
//check if prospectus is on
document.formRec.onsubmit = function() { return ValidForm(); };

function ValidForm(){
		
	if (document.getElementById("first_name").value == ""){
		alert("Please enter your first name");
		document.getElementById("first_name").focus();
		return false;
	}

	if (document.getElementById("last_name").value == ""){
		alert("Please enter you last name");
		document.getElementById("last_name").focus();
		return false;
	}
	if (document.getElementById("email").value == ""){
		alert("Please enter your email address");
		document.getElementById("email").focus();
		return false;
	}
	if (document.getElementById("phone").value == ""){
		alert("Please enter your contact number");
		document.getElementById("phone").focus();
		return false;
	}
	
	if (document.getElementById('00N20000001Hp9a').value== "--None--"){
		alert("Please choose you country of citizenship");
		document.getElementById('00N20000001Hp9a').focus();
		return false;
	}
	
	if (document.getElementById('00N20000001HjsR').value== "--None--"){
		alert("Please select type of study you are interested in");
		document.getElementById('00N20000001HjsR').focus();
		return false; 					
	}
	
	
	switch (document.getElementById('00N20000001Hp9Q').value) {
		
		case "--None--":
		alert("Please select area of study you are interested in");
		document.getElementById('00N20000001Hp9Q').focus();
		return false; 		
		break;
		
		case "Beauty Therapy":
		document.getElementById('00N20000001Hp9Q').value = "Beauty Therapy";	
		document.getElementById('00N20000001HjsR').value = "ANCB";	
		break;

	}
	
	
	return true;
	
}

</script>

I have a DIV that contains a sentence, call it Text_A. When a button is clicked, I would like to have Text_A replaced by Text_B.

Text_A = The sky is blue.
Text_B = The grass is green.

How would I do this with simple javascript?

A non-programmer thank you immensely.

Mike