Accessing SVG file directly from Javascript code

I have this HTML code, which is invoking my javascript code. The code is for a gauge. In the javascript code, I am trying to access a SVG file, and modifying the needle (of the gauge) to display the desired value. The code is working fine. However, I do not wish to call "object id" in HTML. I want to access SVG file through javascript directly, instead of using object id in HTML. I tried using el.setAttribute('data', 'gauge.svg'); But then svg_doc isn't able to retrieve the SVG image and modify the needle. Any help would be highly appreciated.

PS : I tried my best to be as thorough in explaining the problem. However, please let me know if I am unclear somewhere.

This is Gauge.png image which is embedded in the svg code I have pasted below https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>
</svg>

HTML+Javascript code

    <head>
    <title>SVG Gauge example</title>

    <script>
    function update1(){
        var scale=100;
        var value;
        var value1 = 69;

        var el=document.getElementById('gauge1');       
        if (!el) return;

        /* Get SVG document from HTML element */
        var svg_doc = el.contentDocument;
        if (!svg_doc) return;


        /* Rotate needle to display given value */
        var needle_el = svg_doc.getElementById('needle');
        if (!needle_el) return;
        /* Calc rotation angle (0->0%, 260->100%) */
        value = parseInt(value1);
        scale = parseInt(scale);
        if (value > scale) value = scale;
        var angle = value / scale * 260;
        /* On-the-fly SVG transform */
        needle_el.setAttribute('transform','rotate('+angle+',62,62)');
    }
document.addEventListener('load', update1, true);
    </script>

    </head>

<div>
<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>
</div>


</html>

As robertc already mentioned, you can embed the javascript code into your SVG file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>

    <script type="text/javascript">
        var scale=100;
        var value;
        var value1 = 69;

        /* Rotate needle to display given value */
        var needle_el = document.getElementById('needle');
        /* Calc rotation angle (0->0%, 260->100%) */
        value = parseInt(value1);
        scale = parseInt(scale);
        if (value > scale) value = scale;
        var angle = value / scale * 260;
        /* On-the-fly SVG transform */
        needle_el.setAttribute('transform','rotate('+angle+',62,62)');

    </script>
</svg>

I've put the code below the actual SVG contents so that the document is already loaded when the script is executed.

Then, you can view the SVG file directly e.g. in Firefox (I've tested it right now).