HTML and CSS Reference
In-Depth Information
// 1-12 inputs
var allControls = document.querySelectorAll('.control');
for(var i=0, len=allControls.length; i<len; i++) {
var control = allControls[i];
control.onclick = function() {
var value = this.dataset.value;
var string = game.calculation.addInput(value);
game.gameView.updateText(string);
// check result later
}
}
}).call(this);
5. Then, we work on the
calculation
object to take the inputs and form the
equaions. We would like to clear the inputs as well when there are two or
more of them:
game.calculation = {
inputs: [],
result:1,
addInput: function(value) {
if (this.inputs.length >= 2) {
this.clearInputs();
}
this.inputs.push(value);
this.result *= value;
return this.inputs.join('x') + '=' + this.result;
},
clearInputs: function(){
this.inputs.length = 0;
this.result = 1;
}
};
Now, when we load the game, we will see 12 number inputs at the botom of the game.
When we press on an input, the calculaion responds with the correct equaion.
