Loading ...
Sorry, an error occurred while loading the content.

set "display" to "block" in a javascript method

Expand Messages
  • tamsvg
    Hi! I try to make an object like a circle or something else visible with a javascript method by prssing a key. I want to set the display property of the circle
    Message 1 of 1 , May 2 11:00 PM
    • 0 Attachment
      Hi!

      I try to make an object like a circle or something else visible with a
      javascript method by prssing
      a key. I want to set the display property of the circle from 'none' to
      'block'. But no circle
      appears. I put an alert in my function to see if the programm jumps in
      this function and it does.
      So what is wrong here?

      I've made a little example to describe my problem:
      - The circle 1 is like a button to make circle 2 visible. By clicking
      on it the event listener
      for keypressing will be created
      - By clicking on circle 2 I set the attribute display to none
      - By pressing enter/return the program calls the function Key(evt) and
      there is the problem:
      The circle 2 should become visible again but it doesn't work.

      This is the code:

      <?xml version="1.0" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

      <svg width="1000" xmlns:xlink="http://www.w3.org/1999/xlink"
      cursor="auto" height="800" id="svg"
      xmlns="http://www.w3.org/2000/svg">

      <!-- Javascript -->
      <defs>
      <script type="text/javascript"><![CDATA[

      function addKeyListener(evt)
      {
      var elem = evt.target;
      svgdoc = elem.ownerDocument;
      svgroot=svgdoc.rootElement;
      svgroot.addEventListener("keypress",Key,false);
      }
      function Key(evt)
      {
      var keynum=evt.charCode;
      var keychar=String.fromCharCode(keynum);
      var svgdoc = evt.target.ownerDocument;

      if (keynum==13) // ENTER key!!!
      {
      alert("function Key");
      var circle2 = svgdoc.getElementById("Circle2");
      circle2.setAttribute("display","block");
      }
      }

      ]]>
      </script>
      </defs>

      <circle r="40" id="circle1" fill="red" cx="20" cy="20"
      onclick="addKeyListener(evt)"/>

      <circle r="100" id="Circle2" fill="blue" cx="180" cy="180"
      display="none">
      <set attributeName="display" to="block" begin="circle1.click"/>
      <set attributeName="display" to="none" begin="click"/>
      </circle>

      </svg>


      Any suggestions?

      tam
    Your message has been successfully submitted and would be delivered to recipients shortly.