button js tester

by Deborah

HTML

<body>

  <div id="container" class="container">
      <button id="superButton" value="calculate">calculate</button>   
  </div>

</body>

CSS

.container {
   padding: 1em;
}


button {
 cursor: pointer;
 margin: 1em;
 padding: 5px;
 background: #cccccc;  
 border: 1px solid #cccccc;     
}

button.touched {
  border: 2px solid #ff0099;
}

button.success {
 color: #ffffff;
 background: #ff0099;   
 border: 2px solid #ff0099;    
}

JavaScript

// button test template

var superButton = document.getElementById('superButton');

var clicker = function() {
    // did click happen?
    superButton.className = "touched";     
        
    alert("Button clicked! " + this.id + " " + this.innerHTML);
    
    // did function complete?
    superButton.className = "success";
}
        
superButton.onclick = clicker;