Clever Geek Handbook

How to access the value of a Javascript variable outside of a script tag

I want to access the value of a Javascript variable outside of a Javascript tag.

function getprices(input) {
    return input.match(/[0-9]+/g);
}
var subtotals = get_getprices('%GLOBAL_OrderTotal%');
var Grand_total = subtotals[0];
      

        
        
        
      

    
<img height="0" width="0" border="0" src="http://testing.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=I want the Grand+Total Value here">
Run codeHide result


+3


source to share


4 answers


You need to update a property src

on this element img

. Let's say you gave img

a id

(you don't need that, there are other ways to select it, but I'm keeping it simple):

<img id="the-image" height="0" width="0" border="0" src="http://testing.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=I want the Grand+Total Value here">

Then:

function getprices(input) {
    return input.match(/[0-9]+/g);
}
var subtotals = getprices('%%GLOBAL_OrderTotal%%'); // <=== Changed to `getprices`, was `get_getprices`
var Grand_total=subtotals[0];
var img = document.getElementById("the-image");
img.src = "http://testing.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=" + Grand_total;

It looks like it Grand_total

will always be a number, but for the general case where it might not be, be sure to use encodeURIComponent

(it won't hurt even if it's a number):



img.src = "http://testing.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=" + encodeURIComponent(Grand_total);

If you haven't used id

in img

, that's fine, you can use any CSS selector with document.querySelector

. This is supported by all modern browsers as well as IE8.

Note that there are other problems with this code, although not least that getprices

looks rather suspicious.

+2


source


you can use

document.getElementsByTagName("img")[***index of the image tag***].src = "<THE STRING>"+<THE VARIABLE>+"<THE REMAINING STRING>";



or assign an id <img>

and use

`document.getElementById (" image id "). src = "" ++ "";

+1


source


All you have to do is assign your src img value in javascript

$("#imgNeeded").attr("src",".../"+Globalvalue)

Like TJ, Crowder said. make sure you are URI-encoded if your variable contains something other than a number

+1


source


The problem with the provided approaches is how they look, your image will be loaded with unwanted source before being modified:

<html>
    <head>
        <script>
            function getprices(input){return input.match(/[0-9]+/g)};

            function changeSrc(){
                var tE = document.querySelector("img[src*='saleAmount=']");
                var tS = getprices('anyPrice1');

                if (tE && tS) tE.src += encodeURIComponent(tS[0]);
            };
        </script>
</head>

<body onload = 'changeSrc()'>
    <img height = '0' width = '0' border = '0' src = 'http://JUSTTOSHOWtesting.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=' onerror = 'console.log(this.src)'>
</body>

Your console will log two calls:

- GET http://justtoshowtesting.com/?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount= net::ERR_NAME_NOT_RESOLVED
- GET http://justtoshowtesting.com/?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=1 net::ERR_NAME_NOT_RESOLVED

So what you can do is place a placeholder until you get the source you want:

<html>
    <head>
        <script>
            function getprices(input){return input.match(/[0-9]+/g)};

            function createSrc(){
                var tE = document.querySelector("ins[src*='saleAmount=']");
                var tS = getprices('anyPrice1');

                if (tE && tS){
                    var tI = document.getElementById('iPlaceholder');
                    if (!tI){
                        tI = document.createElement('img');
                        tI.id = 'iPlaceholder';
                        tI.onerror = function(){console.log(this.src)};
                        tE.parentNode.insertBefore(tI, tE.nextSibling);
                    };
                    tI.src = tE.getAttribute('src') + encodeURIComponent(tS[0]);
                };
            };
        </script>
    </head>

    <body onload = 'createSrc()'>
        <ins src = 'http://JUSTTOSHOWtesting.com?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount='></ins>
    </body>
</html>

Now your console will just log one call:

- GET http://justtoshowtesting.com/?merchantId=M1&orderNo=%%GLOBAL_OrderId%%&saleAmount=1 net::ERR_NAME_NOT_RESOLVED
+1


source






More articles:


All Articles