digit as text vs. digit as number

by Deborah

HTML

<body>

  <div id="container" class="container">
      <button id="textButtonC" value="calculate">Text var calculated</button>  
      <button id="textButtonR" value="calculate">Text var returned</button>        
      <button id="numberButton" value="calculate">Number</button>         
  </div>

</body>

CSS

.container {
   padding: 1em;
}


button {
 cursor: pointer;
 color: #ffffff;
 margin: 1em;
 padding: 5px;
 background: #ff0099;  
 outline: 0px solid #ffffff;
 border: 2px solid #ff0099;    
}

JavaScript

// digit - show as text or show as number?


function values() {
    var digit = 1;
    var totalc = (10 + 10 + 10); // when it's calculated it remains a number
    
    function calculate() {
        var totalr = (10 + 10 + 10);
        return [totalr]; // when it's returned it becomes text
    }
    var totalr = calculate();

    return [digit, totalc, totalr];
}    

var getData = values();
  var text1 = getData[0];  // text digit
  var text2 = getData[1];  // calculated var
  var text3 = getData[2];  // calculated var returned


  var number1 = Number(getData[0]); //number
  var number2 = Number(getData[2]);

    function writeC() {
       var total = text1+text2;
       return [total];
    }    

    function writeR() {
       var total = text1+text3;
       return [total];
    }

    function calculate() {
       var total = number1+number2;
       return [total];
    }

    var textTotalC = writeC(); 
    var textTotalR = writeR();  
    var numberTotal = calculate();

var textButtonC = document.getElementById('textButtonC');
var textButtonR = document.getElementById('textButtonR');
var numberButton = document.getElementById('numberButton');

var showTextC = function() {  
    alert("Text value is  " + textTotalC);
}
    
var showTextR = function() {  
    alert("Text value is  " + textTotalR);
}
    
var showNumber = function() {  
    alert("Calculated value is  " + numberTotal);
}

textButtonC.onclick = showTextC;    
textButtonR.onclick = showTextR;
numberButton.onclick = showNumber;