www.webdeveloper.com
Results 1 to 7 of 7

Thread: Control traffic lights with model CPU

  1. #1
    Join Date
    May 2012
    Posts
    5

    Control traffic lights with model CPU

    When I was teaching 25 years ago, I wrote a program in Turbo Pascal to represent an on-screen microprocessor so that students could see their programs working. I am now trying to get these working on the web.

    I've now got the CPU working slowly (although not fully tested). I now want the CPU to control the traffic lights.

    see http://homepage.ntlworld.com/stoneba...ndtraffic3.htm

    I have a parent page cpuandtraffic3.htm which is simply:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    <html>
    <head><title>CPU and Traffic Lights</title>
    </head>

    <frameset cols="50%, 50%">
    <frame src="cpu14.svg" align="top" name="cpudoc">
    <frame src="traffic14.svg" align="top" name="trafficdoc">
    </frameset>

    </html>


    My CPU fnlights() code is triggered by onclick on the 'L' button

    function fnlights() {
    var lite, attr
    goslow=false;
    var traffic = parent.document.getElementById('trafficdoc');
    var doc = traffic.document;
    lite = doc.getElementById("x1red");
    attr = lite.getAttribute("fill");
    if (attr == "red") { x1red.setAttribute("fill", "black"); }
    else { x1red.setAttribute("fill", "red"); }
    }

    and I am trying to change the colour of the traffic light
    <circle id="x1red" cx="175" cy="200" r="10" fill="red"/>

    Thanks for any advice.

    Opera reports

    Event thread: click
    Uncaught exception: TypeError: Cannot convert 'traffic' to object
    Error thrown at line 780, column 0 in fnlights() in file://localhost/C:/Documents%20and%20Settings/Computer/My%20Documents/SVGexamples/cpu14.svg:
    var doc = traffic.document;

  2. #2
    Join Date
    May 2012
    Posts
    5

    Alternative parent pages

    The parent page can use embedded pages for each part

    http://homepage.ntlworld.com/stoneba...andtraffic.htm

    or iframes

    http://homepage.ntlworld.com/stoneba...ndtraffic2.htm

    or a frameset

    http://homepage.ntlworld.com/stoneba...ndtraffic3.htm

    I want to keep each part separate 'cos if I get this working, then I have other models that I would like to translate from Pascal to javascript.

    Thanks for any advice.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i suppose (based on the markup you posted in the 1st post) you got this error because there is no element having it's attribute id="trafficdoc" in the parent document.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    May 2012
    Posts
    5

    Thumbs up Thanks Padonak

    You remind me that I had read somewhere that I should declare both id and name to be "trafficdoc"

    It works on Opera - I haven't tried other browsers yet.

  5. #5
    Join Date
    May 2012
    Posts
    5
    The iframes version http://homepage.ntlworld.com/stoneba...ndtraffic2.htm works with Opera, Firefox, and Chrome with either
    var doc = top.trafficdoc.document;
    or var doc = parent.trafficdoc.document;

    IE8 won't work with either of them. It reports
    top.traffic.document is null or not an object

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    May 2012
    Posts
    5

    Thumbs up Thanks again Padonak

    That works with Opera, Firefox, and Chrome. I'll give up with IE8 and worry about that later.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles