ArcGIS API Dojo problem to activate a button for a function

Question

I'm trying to connect (re-connect) a function to a panel button the dom by id is ok, if I use a function like :

on(selectPoly, "click", function(){
   html.set(dom.byId("drawToolTips"),"Autre message !");
})

It work well but when I try the code below I can't reach my start select function (the other function who are not in a panel work well)

var selectPoly = dom.byId("selectPoly");
var selectCircle = dom.byId("selectCircle");
var selectExtent = dom.byId("selectExtent");

var validation = dom.byId("end");
var eraseAll = dom.byId("del");
var goBck = dom.byId("goBack");

// Connect bootstrap tools buttons
on(selectPoly, "click", startSelect("Polygon"));
on(selectCircle, "click", startSelect("Circle"));
on(selectExtent, "click", startSelect("Extent"));
on(validation, "click", endSelect);
on(eraseAll, "click", delSelect);
on(goBck, "click", goBackfn);


function startSelect(drawType) {
  console.log(drawType);

  //activate module zoning séléction
  switch (drawType) {
    case "Polygon":
      select.activate(Draw.POLYGON);
      html.set(dom.byId("drawToolTips"),
        "Cliquez pour ajouter un point,<br> \n\
            Double-Cliquez pour Terminer la forme,\n\
            <br> Echap pour annuler le tracé en cours");

      // fallthrough
    case "Circle":
      html.set(dom.byId("drawToolTips"), "Autre message !");
      // select.activate(Draw.CIRCLE);
      break;


  }
};

here is my html panel :

<div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">

  <!-- Info Panel -->

  <div id="panelDraw" class="panel collapse">
    <div id="headingDraw" class="panel-heading" role="tab">
      <div class="panel-title">
        <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseDraw" aria-expanded="true" aria-controls="collapseDraw"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Séléction géographique</span></a>
        <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelDraw"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
      </div>
    </div>
    <div id="collapseDraw" class="panel-collapse " role="tabpanel" aria-labelledby="headingDraw">
      <div class="panel-body">

        <div id="drawpanelTools">

          <ul class="calcite-nav nav navbar-nav">
            <li><a class="tools" role="button" id="selectPoly" aria-haspopup="true" data-tooltip="tip" title="Séléction par polygone" data-placement="bottom"><span class="glyphicon glyphicon-edit"></span></a></li>
            <li><a class="tools" role="button" id="selectCircle" aria-haspopup="true" data-tooltip="tip" title="Séléction par cercle" data-placement="bottom"><span class="glyphicon glyphicon-record"></span></a></li>
            <li><a class="tools" role="button" id="selectExtent" aria-haspopup="true" data-tooltip="tip" title="Sélection par rectangle" data-placement="bottom"><span class="glyphicon glyphicon-unchecked"></span></a></li>
          </ul>

        </div>
        <div id="tooltipsdiv">

          <p id='drawToolTips'>Cliquez sur un outil pour commencer la séléction</p>
        </div>

      </div>
    </div>
  </div>

</div>

Answer 1

I found my problem: It was because I gave a param to the function,

Here is the right code to call the function :

 on( dom.byId("selectPoly"), "click", function() {
            startSelect("Polygon");
        });
        on( dom.byId("selectCircle"), "click", function() {
            startSelect("Circle");
        });
        on( dom.byId("selectExtent"), "click", function() {
            startSelect("Extent");
        });