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

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

Expand Messages
  • PETER
    Hi I have looked every where for correct use of getElementById but cannot see what I am doing wrong !! Please have a look at
    Message 1 of 4 , Feb 1, 2013
    • 0 Attachment
      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)
    • yannick.bochatay@...
      Hi, just put your code at the end or wrap it in an onload function. Cheers, Yannick ... De: PETER À: svg-developers@yahoogroups.com
      Message 2 of 4 , Feb 1, 2013
      • 0 Attachment
        Hi,
        just put your code at the end or wrap it in an "onload" function.
        Cheers,

        Yannick

        ----- Mail original -----
        De: "PETER" <nospam@...>
        À: 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)
      • PETER
        Thanks Yannick Should have thought of that - have had similar problems before Pete (Northolt UK)
        Message 3 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 4 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.