functions - hierarchy

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;  
 outline: 0px solid #ffffff;
 border: 1px solid #cccccc;     
}

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

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

JavaScript

// what functions can talk to each other?


function outside() {
    var text = "talks to outside";
    var digit = 1;
    function calculate() {
        var total = (10 + 10 + 10);
        return [total];
    }
    var total = calculate();
    return [text, digit, total];
}    

var getData1 = outside();
  var text1 = getData1[0];
  var digit1 = Number(getData1[1]);
  var total1 = Number(getData1[2]);

    function calculate() {
       var total = digit1+total1;
       return [total];
    }

  var total = calculate();


// start the test

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

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