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

Re: getElementById -problem in Firefox - works in IE with Adobe PlugIn

Expand Messages
  • PETER
    Thanks Yannick Should have thought of that - have had similar problems before Pete (Northolt UK)
    Message 1 of 4 , Feb 1, 2013
    • 0 Attachment
      Thanks Yannick

      Should have thought of that - have had similar problems before

      Pete (Northolt UK)

      --- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
      >
      > Hi,
      > just put your code at the end or wrap it in an "onload" function.
      > Cheers,
      >
      > Yannick
      >
      > ----- Mail original -----
      > De: "PETER"
      > À: svg-developers@yahoogroups.com
      > Envoyé: Vendredi 1 Février 2013 18:16:23
      > Objet: [svg-developers] getElementById -problem in Firefox - works in IE with Adobe PlugIn
      >
      >
      >
      >
      >
      >
      > Hi
      >
      > I have looked every where for correct use of "getElementById" but cannot see what I am doing wrong !!
      >
      > Please have a look at http://www.sst-svg.co.uk/devtest2.svg
      > In FIREFOX
      >
      > I really cannot see what is wrong - why is it returning Null ??
      >
      > Thank you, I hope
      > Pete (Northolt UK)
      >
    • Ed Beroset
      ... It s returning null because the vars the SVG is not rendered at the point at which the vars are being assigned. There are a number of ways you could solve
      Message 2 of 4 , Feb 1, 2013
      • 0 Attachment
        PETER wrote:
        >
        >I have looked every where for correct use of "getElementById" but cannot see what I am doing wrong !!
        >
        >
        >Please have a look at http://www.sst-svg.co.uk/devtest2.svg
        >In FIREFOX
        >
        >
        >
        >I really cannot see what is wrong - why is it returning Null ??

        It's returning null because the vars the SVG is not rendered at the point at which the vars are being assigned. There are a number of ways you could solve that problem. You could wrap up the variable assignments in an onload() function like this:

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" onload="findthings()">


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

        var elthingtochange;
        var elthingtochange2;

        function findthings()
        {
        elthingtochange = document.getElementById('thingtochange');
        elthingtochange2 = document.getElementById('thingtochange2');
        }

        etc.

        Another, simpler way to do that would be to pass an event. In that case, the code might look something like this:

        <?xml version="1.0" standalone="no"?>
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">


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

        function dochange(evt)
        {
        elthingtochange = evt.target;
        elthingtochange.setAttribute( "fill", "blue" );
        }

        ]]>
        </script>


        <circle id="thingtochange" onclick="dochange(evt)" cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red" />

        <circle id="thingtochange2" onclick="dochange(evt)" cx="300" cy="50" r="40" stroke="black"
        stroke-width="2" fill="green" />
        </svg>

        Notice that both functions call the same function, but the evt.target allows the function to tell which object fired the event.

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