Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    "Traffic light" html cells with javascript issue

    Hi,

    I've got three html table cells setup so when I click on one of them I simulate a traffic light system (and call some ajax to post the result).

    <td onclick=\"togCell('green'); makemyPOSTRequest('$myvar', '3')
    <td onclick=\"togCell('amber'); makemyPOSTRequest('$myvar', '2')
    <td onclick=\"togCell('red'); makemyPOSTRequest('$myvar', '1')

    The javascript I'm using has worked fine, up until the point that I now have the result from the traffic light saved in a database. When my php script loads it checks the result and changes the background accordingly when the page loads.

    The issue is that say the traffic light loads as red, now if I click on yellow the two cells yellow and red .. if that makes sense. How do I nuetralise the red? ... or any other color. Here's the javascript I'm using:

    Code:
    <script type=\"text/javascript\">
    var el
    function togCell(col){
    if (typeof event!=='undefined')
     el=event.srcElement
    
     for (var i = 0; i < el.parentNode.cells.length; i++)
      el.parentNode.cells[i].style.backgroundColor=''
      el.style.backgroundColor=col
    }
    if (window.addEventListener)
    window.addEventListener('click', function(e){el=e.target}, true)
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Use braces with your for statement (and if statement) - they are not optional. And every Javascript statement should be followed by a semi-colon ; except function, if, else, for, while, do, switch, and try.

    Code:
    for (var i = 0; i < el.parentNode.cells.length; i++) {
      el.parentNode.cells[i].style.backgroundColor='';
      el.style.backgroundColor=col;
    }
    "The louder he talked of his honour, the faster we counted our spoons." - Samuel Johnson
    Last edited by Philip M; 02-04-2013 at 04:19 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that ... can't believe I missed that. Actually can't believe it was working at all in the first place!

    OK, so I changed this line and added the color blue to make it obvious what's going on in my program.

    el.parentNode.cells[i].style.backgroundColor='blue';

    For some reason it highlights the entire row but doesn't change the bgcolor in the code piece I'm using to indicate a saved traffic light from the database (here):

    Code:
    <td bgcolor=\"green\" onclick=\"togCell('#green'); makePOSTRequest('$javvar', '1')\">&nbsp</td>
    Any ideas why it's not changing the bgcolor?

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    *slaps head* never mind ... just solved it

    changing el.parentNode.cells[i].style.backgroundColor='';

    to el.parentNode.cells[i].style.backgroundColor='white';

    surprisingly solves it


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •