javascript is driving me nuts

iceman · Post by **iceman** » Sat Oct 29, 2005 8:38 pm

ive been messing around with javascript for hours now but still cant get a very simple task to work

when I click on something I want to call a function that can change the background color of a <TD> tag within a table on the same web page

I have the click call working and my function is ready to pass on its value but this is were im completely stuck

im able to set the background color manually by including a bgcolor= command within the tag but I have no clue on how to give this tag some sort of i.d. so that I can set it externally ??

examble of the table code and javascript function

Code: Select all

<table>
  <tr>
    <td bgcolor=#ff0000>
      this background should change color when the function is called
    </td>
  </tr>
</table>

<script language="JavaScript><!--
function changecolor(){
  var newcolor=#0000ff;

 do something with newcolor ?????? HELP!

  }
--></script>

any ideas ? , I know some how ive got to give the TD tag some kind of identifier that I can then assign the new bgcolor to but im really stuck

would really be nice if someone could post working code here that I can use as a foundation to build upon

thankyou.

Post by **Lucifer** » Sat Oct 29, 2005 8:51 pm

Give the td a name, like this:

<td name="thetd">

Then do something like this:

Code: Select all

theCell = document.getElementbyID('thetd');
theCell.background = YOURCOLOR;

You might google getElementById to find out exact arguments and stuff, but this should get you going.

Post by **dlh** » Sat Oct 29, 2005 8:55 pm

Well, I haven't used javascript that much but what you can do is something like--

Code: Select all

var foo = getElementsByTagName('td');

and then iterate over each element in foo. A list of attributes for TD may be found http://krook.org/jsdom/.

iceman · Post by **iceman** » Sat Oct 29, 2005 8:56 pm

thanks lucifer gonna start googling now (have been googling for hours but without knowing exactly what to look for ...)

if anyone else has working code feel free to post

will let ya know how I get on very soon

Post by **dlh** » Sat Oct 29, 2005 8:57 pm

You want to google for Javascript DOM.

iceman · Post by **iceman** » Sat Oct 29, 2005 8:57 pm

thanks nemo

iceman · Post by **iceman** » Sat Oct 29, 2005 9:29 pm

cant get it to work argh ....

Post by **dlh** » Sat Oct 29, 2005 10:03 pm

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
  
    <script language="JavaScript" type="text/javascript">
      function chageColors() {
        var allTDElements = document.getElementsByTagName('td');
        
        for (var allTDElementsIndex = 0; allTDElementsIndex < allTDElements.length; allTDElementsIndex++) {
          allTDElements[allTDElementsIndex].setAttribute("bgcolor", "red")
        }
      }
    </script>

    <table>
      <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
      </tr>
      <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
      </tr>
    </table>

    <a href="#" onclick="chageColors();">Do it</a>
  </body>
</html>

iceman · Post by **iceman** » Sat Oct 29, 2005 11:54 pm

thanks nemo, do you know how to make this work for a single named td element ?

Post by **Lucifer** » Sun Oct 30, 2005 12:03 am

Heh, yeah. You do something like this:

<td id="something"> (might be name="something")

Then in your javascript do:

myCell = document.getElementById('something');

iceman · Post by **iceman** » Sun Oct 30, 2005 1:21 am

yeah ive tried all that, keeps telling me that the object contains no propeties

my program is complete and just waiting on this one stupid problem aaarrrggghhhh ! :lol

this is really driving me crazy

Post by **Lucifer** » Sun Oct 30, 2005 1:26 am

http://www.mozilla.org/docs/dom/domref/ ... ref48.html

You did put a doctype declaration at the top of the page, right? If you didn't, you might get a nonstandard DOM.

iceman · Post by **iceman** » Sun Oct 30, 2005 2:10 am

aaarrrggghhhh

heres some code that dont work together with the reported error message

Code: Select all

<table>
  <tr>
    <td id='test1' bgcolor=#ff0000>
      blah .....
    </td>
  </tr>
</table>

<script="javascript">
document.getElementById("test1").bgcolor="#0000ff";
</script>

and the result is

Error: document.getElementById("test1") has no properties

what am I doing wrong ?

Post by **dlh** » Sun Oct 30, 2005 2:13 am

document.getElementById("test1").setAttribute("bgcolor","#0000ff");

iceman · Post by **iceman** » Sun Oct 30, 2005 2:21 am

same error message