title: Change button text programmatically in Dojo
body: <p>Here is my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>dojoConfig = {parseOnLoad: true};
  
  resetStopwatch();
  
  require(["dojo/query", "dijit/form/ToggleButton", "dijit/form/Button", "dojo/dom", "dojo/dom-attr", "dojo/domReady!"], function(query, ToggleButton, Button, dom, domAttr){
    //query("#resume").style("display", "none");
  
    var timeUpdate, flag; 
    flag = false;
  
    new ToggleButton({
      showLabel: true,
      checked: false,
      onChange: function(val) {
        if (val) {
          this.set('label', 'Stop');
  
          var milliseconds = seconds = minutes = hours = 0;
  
          if(flag){
            // fetch current time in the stopwatch
            milliseconds = parseInt(domAttr.get("milliseconds", "innerHTML"));
            seconds      = parseInt(domAttr.get("seconds", "innerHTML"));
            minutes      = parseInt(domAttr.get("minutes", "innerHTML"));
            hours        = parseInt(domAttr.get("hours", "innerHTML"));
          }
  
          var startTime = new Date();
          timeUpdate = setInterval(function(){
            var timeElapsed = new Date().getTime() - startTime.getTime();
  
            // calculate hours                
            hours = parseInt(timeElapsed/1000/60/60);
            hours = prependZero(hours);
            domAttr.set("hours", "innerHTML", hours + " h ");
  
            // calculate minutes
            minutes = parseInt(timeElapsed/1000/60);
            if(minutes &gt; 60)
              minutes = minutes % 60;
            minutes = prependZero(minutes);
            domAttr.set("minutes", "innerHTML", minutes + " m ");
  
            // calculate seconds
            seconds = parseInt(timeElapsed/1000);
            if(seconds &gt; 60)
              seconds = seconds % 60;
            seconds = prependZero(seconds);
            domAttr.set("seconds", "innerHTML", seconds + " s ");
  
            // calculate milliseconds 
            milliseconds = timeElapsed;
            milliseconds = prependZero(milliseconds);
            if(milliseconds &gt; 1000)
              milliseconds = milliseconds % 1000;
            if(milliseconds &lt; 10)
              milliseconds = "00" + milliseconds.toString();
            else if(milliseconds &lt; 100)
              milliseconds = "0" + milliseconds.toString();                
            domAttr.set("milliseconds", "innerHTML", milliseconds + " milli");
  
          },25);  // updated time after every 25ms
  
        } else {
          this.set('label', 'Resume');
          clearInterval(timeUpdate);
        }
      },
      label: "Start"
    }, "start_stop");
  
    /*var resumeButton = new Button({
          label: "Resume",
          onClick: function(){
              //clearInterval(timeUpdate);
              //resetStopwatch();        
          }
      }, "resume");  */  
  
    var resetButton = new Button({
      label: "Reset",
      onClick: function(){
        domAttr.set("start", 'label', "Start");
        clearInterval(timeUpdate);
        resetStopwatch();        
      }
    }, "reset");
  });
  
  function resetStopwatch(){
    require(["dojo/dom-attr"], function(domAttr){
      domAttr.set("hours",        "innerHTML", "00 h ");
      domAttr.set("minutes",      "innerHTML", "00 m ");
      domAttr.set("seconds",      "innerHTML", "00 s ");
      domAttr.set("milliseconds", "innerHTML", "000 milli");
    });
  }
  
  function prependZero(time){
    if(time &lt; 10){
      time = "0" + time.toString();
      return time;
    }
    else
      return time;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#stopwatch, #buttons{
    text-align: center;
  }
  
  .claro *
  {
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css"&gt;
  
  &lt;div id="stopwatch"&gt;
    &lt;span id="hours"&gt;&lt;/span&gt;
    &lt;span id="minutes"&gt;&lt;/span&gt;
    &lt;span id="seconds"&gt;&lt;/span&gt;
    &lt;span id="milliseconds"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="buttons" class="claro"&gt;
    &lt;button id="start_stop"&gt;&lt;/button&gt;
    &lt;!--&lt;button id="resume"&gt;&lt;/button&gt;--&gt;
    &lt;button id="reset"&gt;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Consider this use-case: click <code>Start</code> > after some time, click <code>Reset</code> - I plan to change the label from <code>Stop</code> to <code>Start</code> back again. So, I did:</p>
  
  <pre><code>domAttr.set("start", 'label', "Start");   // line # 83
  </code></pre>
  
  <p>But it is throwing an error:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'setAttribute' of null 
  </code></pre>
  
  <p>Not sure what I am doing wrong here. Please help!</p>