title: Complex JS onclick events from multiple elements
body: <p>Ok ( the title may be misleading ) however it is the best i can come up with.</p>
  
  <p>What we want to achieve ?</p>
  
  <p>Ok we have an svg map, of Australia.</p>
  
  <p>On click of a state on that map, the map state changes colour to selected. ( in our case Pink )
  At the same time ( a useless button ) which is on page load blank, changes its value to that of the state.
  Simultaneously a drop down menu, with the state names in, which on page load has the value , Please Select , changes its value to that of the state.</p>
  
  <p>So : here is what happens.</p>
  
  <p>User visits page and sees map. They also see drop down select box.</p>
  
  <p>They can choose to either click the select dropdown, or click the map.</p>
  
  <p>Scenario 1.
  They click the map, and click on the state QUEENSLAND , which has a value of QLD.</p>
  
  <p>On clicking the state, the state changes from grey to <strong>pink</strong>.
  The select drop down, changes from Please select, to <strong>Queensland</strong>
  The gray button changes from blank to <strong>QLD</strong></p>
  
  <p>Here is an image:
  <img src="https://i.stack.imgur.com/48q00.png" alt="enter image description here"></p>
  
  <p>Ok what we have working is.</p>
  
  <p>The map click events work, and propagate the grey button values, so thats all fine.
  The select element works, in so far as if we select a state on the map it changes select box value.</p>
  
  <p>What we dont have working is.</p>
  
  <ol>
  <li>on click of map, we cannot propagate <strong>BOTH</strong> the select drop down and the gray button values.</li>
  <li>we cannot on using the select drop down box, change the "select" state of the map , ie, doesnt change from grey to pink. Also it doesnt change the value of the button from its current value.</li>
  </ol>
  
  <p>So here is some code:</p>
  
  <p>Its SVG so here is the wrap element for the map.</p>
  
  <pre><code>&lt;a xlink:href="javascript:void goToOption(document.australia.state,'WA')" target="_top"&gt;
      &lt;path
          id="WA"
          class="territory"
          fill="#a9a9a9"
          onmouseup="clickTerritory(evt)"
          d="m 38.318056,168.24244 c -4.79245,0.99662 -8.64245,1.61598 l -7,1.12612 -8.18526,4.91727 -8.18526,4.91727 -5.31474,-0.0902 c -2.92311,-0.0496 -6.88974,-0.54005 -8.81474,-1.08988 z"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is the JS that controls the map click events:</p>
  
  <pre><code>function prepare(){}
  function ready(){
      svgdoc = document.sv.getSVGDocument();
      svgRoot = svgdoc.documentElement;
  }
  function onTerritoryClick(territory){
      document.getElementById("territory-name").innerHTML=territory;
  }
  
  var selected_territory = "None";
  
    function init(evt) {
      if (window.svgDocument == null)
      {
          svgDocument = evt.target.ownerDocument;
      }
    }
  
    function clickTerritory(evt) {
      var clicked_territory;
  
      if (evt.target.parentNode.getAttributeNS(null, "id") != "australia-map")
      {
          // Hack to deal with groups
          clicked_territory = evt.target.parentNode;
      } else {
          clicked_territory = evt.target;
      }
  
      if (selected_territory != clicked_territory) {
          if (selected_territory != "None") {
              // Unselect previous territory
              selected_territory.setAttributeNS(null, "fill", "#a9a9a9");
          }
          selected_territory = clicked_territory;
          selected_territory.setAttributeNS(null, "fill", "#ec008c");
          top.onTerritoryClick(selected_territory.getAttributeNS(null, "id"));
      } 
    }
  </code></pre>
  
  <p>Here is the JS to handle the select box, which fires the href.</p>
  
  <pre><code>function goToOption(sel, val) {
    var opt, o = 0;
    while (opt = sel[o++]) if (opt.value == val) sel.selectedIndex = o - 1;
  }
  </code></pre>
  
  <p>Here is the button html:</p>
  
  <pre><code>&lt;div class="selected-state left"&gt;
      &lt;button id="territory-name" class="mystate grayNohover button" style="position:absolute;top:250px;left:50px"&gt;ALL&lt;/button&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the select menu html:</p>
  
  <pre><code>&lt;select name="state" id="speedF" style="width:180px;"&gt;
  &lt;option value=""&gt;Please Select&lt;/option&gt;
  &lt;option value="QLD"&gt;Queensland&lt;/option&gt;
  &lt;option value="NT"&gt;Northern Territory&lt;/option&gt;
  &lt;option value="WA"&gt;Western Australia&lt;/option&gt;                           
  &lt;option value="SA"&gt;South Australia&lt;/option&gt;
  &lt;option value="NSW"&gt;New South Wales&lt;/option&gt;
  &lt;option value="VIC"&gt;Victoria&lt;/option&gt;
  &lt;option value="ACT"&gt;A.C.T.&lt;/option&gt;
  &lt;option value="TAS"&gt;Tasmania&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>sample: <a href="http://sitehelp.com.au/demos/svgmap2/" rel="nofollow noreferrer">http://sitehelp.com.au/demos/svgmap2/</a></p>
  
  <p>Version 2: <a href="http://dev.30.com.au/422-svg/" rel="nofollow noreferrer">http://dev.30.com.au/422-svg/</a></p>