Home/ Questions/Q 6984507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:33:29+00:00

What I am trying to do is the following. I am writing code for

  • 0

What I am trying to do is the following. I am writing code for a sketch using Raphael.js, in an HTML file. To keep the file cleaner, I want to define the long paths in a separate file pathsFile.js, from which I can access the path. Even though I am using Raphael.js, I think my question has more to do with Javascript than with Raphael.js.

The following works:

<!doctype html>  
<html lang="en">

    <head>
        <meta charset="utf-8">          
        <script src="./raphaelJS/raphael.js"></script>
        <script src="./pathsFile.js"></script>
    </head>

    <body>

        <div id="main">

        <div id="figSellerBuyer"></div>
         <script>
            s = 1;
            attrbs = {stroke: "white", "stroke-width": 2};
            pw = 850;
            ph = 450;

            paper = new Raphael('figSellerBuyer', pw*s, ph*s);
                    market = paper.path(paths.marketBoundary);

          </script> 

</body>
</html>

where file pathsFile.js is:

var paths = {
    marketBoundary: "M 20 20 L 500 20 L 500 430 L 20 430 Z"
}

The problem is:

What I want to do is replace the hard coded numbers in pathsFile.js to depend on variables pw and ph defined in the main HTML file. For example, if I change the pathsFile.js to:

var ph = 450;
var paths = {
    marketBoundary: "M 20 20 L 500 20 L 500 430 L 20 " + ph-20 + " Z"
}

the code still works. But this involves defining ph in the pathsFile.js. Is there a way I can read the values defined in main HTML file.

Thanks for reading this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes – use multiple <script> blocks:

    <script>
   var s = 1;
   var attrbs = {stroke: "white", "stroke-width": 2};
   var pw = 850;
   var ph = 450;
</script>

<script src="./pathsFile.js"></script>

<script>
   var paper = new Raphael('figSellerBuyer', pw*s, ph*s);
           market = paper.path(paths.marketBoundary);
 </script>

    However, being conscious to global namespace pollution, this could certainly be cleaned up. A simple example of this would be first declaring var myConfig = {}, then assigning all of your variables to myConfig – so that only one top-level variable is being used. (Also, explicitly declare all of your variables with var.)

    • 0