Answers.Body: <h1>Craft 3</h1>
  
  <p>According to the craft 3 <code>js</code> <a href="https://docs.craftcms.com/v3/dev/tags/js.html#parameters" rel="nofollow noreferrer">docs</a></p>
  
  <p>We'll need to adjust some things as follows:</p>
  
  <h3>Twig</h3>
  
  <p>We no longer need to tell craft which File we're editing as it 
  now simply inserts a <code>&lt;script&gt;</code> tag with the contents at the end of the <code>&lt;body&gt;</code> tag. (Can be adjusted, see <a href="https://docs.craftcms.com/v3/dev/tags/js.html#position" rel="nofollow noreferrer">position docs</a>.)</p>
  
  <pre><code>{% js %}
  // define our vars
  var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
  var dziData = "{{ entry.kelimImageData }}";
  //Call our function
  tileSourceFromData(dziData, dziFilesUrl);
  {% endjs %}
  </code></pre>
  
  <h3>JS</h3>
  
  <p>Remove the <code>dziFilesUrl</code> declaration from <code>openseadragon-custom-dzi.js</code> &amp; and other files you declare this variable in.</p>
  
  <p>And that about sums it up, if any error does occur, please inform me of whatever error your browser console spews out or otherwise any error craft presents.</p>
  
  <h1>Craft 2</h1>
  
  <p>I'm gonna guess that you're using craft cms v2 as I only found <code>includeJS</code> in the <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">craft 2 docs</a>. </p>
  
  <h3>Adjust your twig as follows:</h3>
  
  <pre><code>{%includeJsFile "" %}
  
  {% set myJs %}
    // here you're setting the vars which use the twig variables for them to be available later on in the JS
    var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
    var dziData = "{{ entry.kelimImageData }}";
  
    // you could even still call your `tileSourceFromData` function here
    tileSourceFromData(dziData, dziFilesUrl);
  {% endset %} 
  
  {% includeJs myJs %}` 
  </code></pre>
  
  <p><strong>And then remove the setting of those vars in your <code>openseadragon-custom-dzi.js</code>.</strong></p>
  
  <p>This should:</p>
  
  <ol>
  <li>Set the vars with the backend data in the Footer (see <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">docs</a>)</li>
  <li>Call the <code>tileSources</code> function in the footer as you did before.</li>
  <li>Allow you to use the <code>dziFilesUrl</code> and the <code>dziData</code> variables anywhere else in your JS with the backend data as their values.</li>
  </ol>
  
  <p>Beware: This JS is getting executed in the footer according to the <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">docs</a> so you need to either start your function call from within the twig <code>myJs</code> or when the full page is loaded, otherwise you'll run into undefined variables.</p>
  
  <p>Sidenote: you were calling your <code>tileSourceFromData</code> function in the twig with only one arg, instead of the required two before, this is also adjusted in my answer.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-07T08:41:59.480Z
Answers.Text: Thanks. But its not working yet. First thing i was not aware of, is that there is a difference between craft 2 & 3. So i changed `{%includeJsFile "" %}`to `{% js "" %}`.
  But i get an error: "Uncaught SyntaxError: Invalid regular expression flags", which i cannot find. Between the "" in {% js "" %} i have to put the path to the js file, right?
  And what do you mean by "then remove the setting of those vars..."? Should i remove the vars in the .js File?
Answers.UserDisplayName: Henrik
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-09T09:05:58.780Z
Answers.Text: that's what I was implying yes, since you're setting / "creating" those vars in your craft js part, there's no need to also declare them in your acutal .js file (also this'll prevent them from being overwritten from double-declarations)
Answers.UserDisplayName: Campiotti
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-09T09:25:53.527Z
Answers.Text: @Henrik I've updated my answer to include a craft 3 part at the top, if you follow that guide you should hopefully be able to fix your issue.
  
  There's no longer any need for the `"/path/to/file.js"` in `{% js "" %}` as it's been changed (see linked docs in updated answer), now you just do `{% js %}`
Answers.UserDisplayName: Campiotti
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-13T12:20:35.857Z
Answers.Text: thanks a lot. just found some time to try your solution. I edited the code example in my initial questions, because i think you are missing something with the second var, because i did not mention it correctly. 
  The var dziData is not the twig variable, but is part of the javascript for image zoom to work (Tile Images made by Deepzoom to work in Openseadragon Viewer).
Answers.UserDisplayName: Henrik
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-13T12:30:09.323Z
Answers.Text: When i follow your instruction, i get the error in the console: dziData is not defined. When i leave the var=dziData like in my inital question, the console.log of the image gives me something like this: "http://localhost:3000/openseadragon/highres/O:28:&quot;craftelementsdbAssetQuery&quot;:85:{s:8:&quot;volumeId&quot;;N;s:..." and so on. Encoding Issue?
Answers.UserDisplayName: Henrik
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-16T06:51:12.380Z
Answers.Text: That looks more like debug output which is also "cleaned" so no injections can occur, both of those things are not really what we want in this case...
  
  I'll try and look around in the docs to see if I can find anything, not sure what could be causing this type of output currently.
  
  I don't think it's an encoding issue though.
Answers.UserDisplayName: Campiotti
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-06T10:25:14.133Z
Answers.LastActivityDate: 2019-12-09T09:24:01.163Z
Answers.LastEditDate: 2019-12-09T09:24:01.163Z
Answers.UserDisplayName: Campiotti
Body: <p>I tried different solutions given <a href="https://craftcms.stackexchange.com/questions/19726/pass-craft-field-object-to-javascript-function">here</a>, <a href="https://craftcms.stackexchange.com/questions/17773/how-do-i-print-a-value-from-craft-twig-into-a-javascript-function">here</a> and <a href="https://craftcms.stackexchange.com/questions/10949/can-i-set-a-js-variable-to-a-twig-output-tag/10950#10950">here</a>.
  But I get nothing to work, probably missing something small and simple.</p>
  
  <p>I have this variable in a .js File:  </p>
  
  <pre class="lang-js prettyprint-override"><code>var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
  var dziData = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"&gt;&lt;Size Height="5097" Width="3600"/&gt;&lt;/Image&gt;';
  </code></pre>
  
  <p>where I want the <code>entry.kelimImageData</code> coming from the Backend.</p>
  
  <p>In my .twig File i have this:  </p>
  
  <pre><code>{% includeJsFile "/assets/js/openseadragon-custom-dzi.js" %}
  
  {% set myJs %}
    tileSourceFromData('{{entry.kelimImageData}}');
  {% endset %} 
  
  {% includeJs myJs %}` 
  </code></pre>
  
  <p>My <code>openseadragon-custom-dzi.js</code> File looks like this (modified to make it not so long)  </p>
  
  <pre><code>var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
  var dziData = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"&gt;&lt;Size Height="5097" Width="3600"/&gt;&lt;/Image&gt;';
  
  var tileSourceFromData = function(data, filesUrl) {
    var $xml = $($.parseXML(data));
    var $image = $xml.find('Image');
    var $size = $xml.find('Size');
    var dzi = {
      Image: {
        xmlns: $image.attr('xmlns'),
        Url: filesUrl,
        Format: $image.attr('Format'),
        Overlap: $image.attr('Overlap'),
        TileSize: $image.attr('TileSize'),
        Size: {
          Height: $size.attr('Height'),
          Width: $size.attr('Width')
        }
      }
     return dzi;
    }; 
  }
  </code></pre>
  
  <pre><code>var viewer = OpenSeadragon({
    ...
    tileSources: tileSourceFromData(dziData, dziFilesUrl)
  });
  </code></pre>
  
Tags: <variable><includejs>
Title: Pass Craft Field String to Javascript Function
ThreadText: # Pass Craft Field String to Javascript Function
  
  (Asked by: username_0 on 2019-12-05)
  
  I tried different solutions given [here](https://craftcms.stackexchange.com/questions/19726/pass-craft-field-object-to-javascript-function), [here](https://craftcms.stackexchange.com/questions/17773/how-do-i-print-a-value-from-craft-twig-into-a-javascript-function) and [here](https://craftcms.stackexchange.com/questions/10949/can-i-set-a-js-variable-to-a-twig-output-tag/10950#10950).
  But I get nothing to work, probably missing something small and simple.
  
  I have this variable in a .js File:
  
  ```js
  var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
  var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="5097" Width="3600"/></Image>';
  
  ```
  
  where I want the `entry.kelimImageData` coming from the Backend.
  
  In my .twig File i have this:
  
  ```
  {% includeJsFile "/assets/js/openseadragon-custom-dzi.js" %}
  
  {% set myJs %}
    tileSourceFromData('{{entry.kelimImageData}}');
  {% endset %} 
  
  {% includeJs myJs %}` 
  
  ```
  
  My `openseadragon-custom-dzi.js` File looks like this (modified to make it not so long)
  
  ```
  var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
  var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="5097" Width="3600"/></Image>';
  
  var tileSourceFromData = function(data, filesUrl) {
    var $xml = $($.parseXML(data));
    var $image = $xml.find('Image');
    var $size = $xml.find('Size');
    var dzi = {
      Image: {
        xmlns: $image.attr('xmlns'),
        Url: filesUrl,
        Format: $image.attr('Format'),
        Overlap: $image.attr('Overlap'),
        TileSize: $image.attr('TileSize'),
        Size: {
          Height: $size.attr('Height'),
          Width: $size.attr('Width')
        }
      }
     return dzi;
    }; 
  }
  
  ```
  
  ```
  var viewer = OpenSeadragon({
    ...
    tileSources: tileSourceFromData(dziData, dziFilesUrl)
  });
  
  ```
  
  **Tags:** variable, includejs
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-12-06. Score: 1
  
  # Craft 3
  
  According to the craft 3 `js` [docs](https://docs.craftcms.com/v3/dev/tags/js.html#parameters)
  
  We'll need to adjust some things as follows:
  
  ### Twig
  
  We no longer need to tell craft which File we're editing as it
  now simply inserts a `<script>` tag with the contents at the end of the `<body>` tag. (Can be adjusted, see [position docs](https://docs.craftcms.com/v3/dev/tags/js.html#position).)
  
  ```
  {% js %}
  // define our vars
  var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
  var dziData = "{{ entry.kelimImageData }}";
  //Call our function
  tileSourceFromData(dziData, dziFilesUrl);
  {% endjs %}
  
  ```
  
  ### JS
  
  Remove the `dziFilesUrl` declaration from `openseadragon-custom-dzi.js` & and other files you declare this variable in.
  
  And that about sums it up, if any error does occur, please inform me of whatever error your browser console spews out or otherwise any error craft presents.
  
  # Craft 2
  
  I'm gonna guess that you're using craft cms v2 as I only found `includeJS` in the [craft 2 docs](https://docs.craftcms.com/v2/templating/includejs.html).
  
  ### Adjust your twig as follows:
  
  ```
  {%includeJsFile "" %}
  
  {% set myJs %}
    // here you're setting the vars which use the twig variables for them to be available later on in the JS
    var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
    var dziData = "{{ entry.kelimImageData }}";
  
    // you could even still call your `tileSourceFromData` function here
    tileSourceFromData(dziData, dziFilesUrl);
  {% endset %} 
  
  {% includeJs myJs %}` 
  
  ```
  
  **And then remove the setting of those vars in your `openseadragon-custom-dzi.js`.**
  
  This should:
  
  1. Set the vars with the backend data in the Footer (see [docs](https://docs.craftcms.com/v2/templating/includejs.html))
  2. Call the `tileSources` function in the footer as you did before.
  3. Allow you to use the `dziFilesUrl` and the `dziData` variables anywhere else in your JS with the backend data as their values.
  
  Beware: This JS is getting executed in the footer according to the [docs](https://docs.craftcms.com/v2/templating/includejs.html) so you need to either start your function call from within the twig `myJs` or when the full page is loaded, otherwise you'll run into undefined variables.
  
  Sidenote: you were calling your `tileSourceFromData` function in the twig with only one arg, instead of the required two before, this is also adjusted in my answer.
  
  > **Comments:**
  > **username_0**: Thanks. But its not working yet. First thing i was not aware of, is that there is a difference between craft 2 & 3. So i changed `{%includeJsFile "" %}`to `{% js "" %}`. But i get an error: "Uncaught SyntaxError: Invalid regular expression flags", which i cannot find. Between the "" in {% js "" %} i have to put the path to the js file, right? And what do you mean by "then remove the setting of those vars..."? Should i remove the vars in the .js File?  
  > **username_1**: that's what I was implying yes, since you're setting / "creating" those vars in your craft js part, there's no need to also declare them in your acutal .js file (also this'll prevent them from being overwritten from double-declarations)  
  > **username_1**: @username_0 I've updated my answer to include a craft 3 part at the top, if you follow that guide you should hopefully be able to fix your issue.  There's no longer any need for the `"/path/to/file.js"` in `{% js "" %}` as it's been changed (see linked docs in updated answer), now you just do `{% js %}`  
  > **username_0**: thanks a lot. just found some time to try your solution. I edited the code example in my initial questions, because i think you are missing something with the second var, because i did not mention it correctly.  The var dziData is not the twig variable, but is part of the javascript for image zoom to work (Tile Images made by Deepzoom to work in Openseadragon Viewer).  
  > **username_0**: When i follow your instruction, i get the error in the console: dziData is not defined. When i leave the var=dziData like in my inital question, the console.log of the image gives me something like this: "http://localhost:3000/openseadragon/highres/O:28:&quot;craftelementsdbAssetQuery&quot;:85:{s:8:&quot;volumeId&quot;;N;s:..." and so on. Encoding Issue?  
  > **username_1**: That looks more like debug output which is also "cleaned" so no injections can occur, both of those things are not really what we want in this case...  I'll try and look around in the docs to see if I can find anything, not sure what could be causing this type of output currently.  I don't think it's an encoding issue though.  
  
  ---
  
  