title: Filtering an embedded Tableau visualization using Javascript
body: <p>I am quite new to Javascript and HTML.
  As a part of learning, I am working on a public visualization. (<a href="https://public.tableau.com/views/Superstore_24/Overview" rel="nofollow noreferrer">https://public.tableau.com/views/Superstore_24/Overview</a>).</p>
  <p><strong>What I'm trying to do</strong>:</p>
  <ol>
  <li>Specify a region.</li>
  <li>Initialize the visualization after applying a filter based on region.</li>
  <li>Display the Tableau visualization.</li>
  </ol>
  <p><strong>The challenge</strong>:</p>
  <p>The code works when the user input is a word without spaces (Eg: &quot;Washington&quot;).
  It also works for multiple single-word filters (Eg: &quot;Washington,Oregon&quot;).
  <strong>However it fails when the input is a word with a space</strong> (Eg: &quot;West Virginia&quot;).</p>
  <p>The particular snippet where I am taking input and sending it to the visualization is as follows:</p>
  <pre><code> function show() {
          State = document.getElementById(&quot;Region&quot;).value; //variable to store user input
          document.getElementById(&quot;Showviz&quot;).innerHTML = 
          `
          &lt;h3&gt;Your visualization: ${State} &lt;/h3&gt;
          &lt;tableau-viz
          id=&quot;tableauViz&quot;
          src=&quot;https://public.tableau.com/views/Superstore_24/Overview&quot;
          device=&quot;phone&quot;
          hide-tabs
          &gt;
          &lt;viz-filter field=&quot;State&quot; value=${State}&gt;&lt;/viz-filter&gt;
          &lt;/viz-filter&gt;
          &lt;/tableau-viz&gt;
          `;
        }
  </code></pre>
  <p>This is a weird problem, and I would really appreciate help on it.</p>
  <p>Attaching the full code here:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;Viz&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script
        async
        type=&quot;module&quot;
        src=&quot;https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js&quot;
      &gt;&lt;/script&gt;
      &lt;!-- Custom script starts here --&gt;
      &lt;script&gt;
        var State;
        function show() {
          State = document.getElementById(&quot;Region&quot;).value; //variable to store user input
          document.getElementById(&quot;Showviz&quot;).innerHTML = `
          &lt;h3&gt;Your visualization: ${State} &lt;/h3&gt;
          &lt;tableau-viz
          id=&quot;tableauViz&quot;
          src=&quot;https://public.tableau.com/views/Superstore_24/Overview&quot;
          device=&quot;phone&quot;
          hide-tabs
          &gt;
          &lt;viz-filter field=&quot;State&quot; value=${State}&gt;&lt;/viz-filter&gt;
          &lt;/viz-filter&gt;
          &lt;/tableau-viz&gt;
          `;
        }
      &lt;/script&gt;
      &lt;input
        id=&quot;Region&quot;
        type=&quot;text&quot;
        placeholder=&quot;Please enter your State&quot;
        style=&quot;width: 500px&quot;
        required
      /&gt;
      &lt;button type=&quot;button&quot; id=&quot;change&quot; onclick=&quot;show()&quot;&gt;Click Me!&lt;/button&gt;
      &lt;!-- Viz is displayed here --&gt;
      &lt;p id=&quot;Showviz&quot;&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>