External Javascript file fails to receive variables from previous javascript block

Posted by Franc on Stack Overflow See other posts from Stack Overflow or by Franc
Published on 2012-11-22T21:42:54Z Indexed on 2012/11/22 22:59 UTC
Read the original article Hit count: 195

Filed under:
|
|

I've been searching the net for several hours and can't find an answer in the whole "external js file"-jungle. I hope you guys can help!

In short: My external javascript file doesn't seem to get the variables which I defined in the main.php file..

  1. On main.php I define php variables and "transform" them into javascript variables

    <head>...
    <script type="text/javascript">
    var phpmain_img = <?php echo json_encode($main_img); ?>;
    var phpvar1_large = <?php echo json_encode($var1_large); ?>;
    var phpvar2_large = <?php echo json_encode($var2_large); ?>;
    var phpvar3_large = <?php echo json_encode($var3_large); ?>;
    var phpvar4_large = <?php echo json_encode($var4_large); ?>;
    </script>
    ...
    <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script>
    </head>
    
  2. In my ext.js file I want to process those variables. In the ext.js file I defined a the function swapImage() that will be used back in the main PHP:

            var imgArray = new Array(
            phpmain_img,
            phpvar1_large,
            phpvar2_large,
            phpvar3_large
            );
    
        function swapImage(imgID) {
            var theImage = document.getElementById('theImage');
            var newImg;
            newImg = imgArray[imgID];
            theImage.src = newImg;
        }
    
        function preloadImages() {      
            for(var i = 0; i < imgArray.length; i++) {
                var tmpImg = new Image;
                tmpImg.src = imgArray[i];
            }
        }
    
  3. Result: The swapImage() in the main.php... doesnt work

    <div id="image">
        <img id="theImage" src="<?=$main_img; ?>" alt="" />
    </div>
    
    <div id="thumbs">
    <?php
    
            echo "<img src=\"<$main_img_small\" alt=\"\" onmouseover=\"swapImage(0);\">";
            echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"swapImage(1);\">";
            echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"swapImage(2);\">";
            echo "<img src=\"$var3_small\" alt=\"\" onmouseover=\"swapImage(3);\">";
    
            ?>
    
    
        <br />
    </div>
    

Any help is greatly appreciated!

UPDATE:

I don't get a specific error, the swapImage functions doesn't work at mouseover. However, I tried to output the variables with e.g. document.write(phpimg_main) but nothing appears which makes me believe that there's something wrong with the handing over of the variables...

here's the source code browser output

`<html>
    <head>
        <link href="../demo.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            ....
</style>

        <script type="text/javascript">
        var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"};
        var phpvar1_large = {"0":"http:\/\/path\/to\/image1.jpg"};
        var phpvar2_large = {"0":"http:\/\/path\/to\/image2.jpg"};
        var phpvar3_large = null;
        var phpvar4_large = null;
        </script>   

        <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script>
</head>




<body onload="preloadImages()">

    <div id="image">
        <img id="theImage" src="http://path-to-main-image.jpg" alt="" />
    </div>

    <div id="thumbs">
    <img src="http://path-to-main-image.jpg" alt="" onmouseover="swapImage(0);"><img src="http://path-to-image1.jpg" alt="" onmouseover="swapImage(1);"><img src="http://path-to-image2.jpg" alt="" onmouseover="swapImage(2);">

        <br />
    </div>



</body>

`

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery