Addition buttons

Test templates for scopes/variables

by Zonedark

HTML

<div>
    <button class="buttons" onclick="Add(1)">+1</button>
    <button class="buttons" onclick="Add(2)">+2</button>
    <button class="buttons" onclick="Add(3)">+3</button>
    <button class="buttons" onclick="Add(4)">+4</button>
    <button class="buttons" onclick="Add(5)">+5</button>
</div>
<div>
    <button class="buttons" onclick="Add(6)">+6</button>
    <button class="buttons" onclick="Add(7)">+7</button>
    <button class="buttons" onclick="Add(8)">+8</button>
    <button class="buttons" onclick="Add(9)">+9</button>
    <button class="buttons" onclick="Add(10)">+10</button>
</div>
<div>
    <label id="OperationsLabel">Operations: 0</label>
</div>
<div class="test">
    <label id="resultLabel">0</label>
</div>
<div>
    <button onclick="check()">Check</button>
    <button onclick="reset()">Reset</button>
</div>

CSS

.buttons{
    width:40px;
    height:40px;
    border-radius:30px;
    box-shadow:0;
    color:blue;
    background-color:whitesmoke;
    border: solid 1px blue;
    outline: none;
}

JavaScript

var x = 0;
resultLabel = document.getElementById('resultLabel');
OperationsLabel = document.getElementById('OperationsLabel');
    
function Add(c) {
    x = x + c;
    resultLabel.innerHTML  = x;
    OperationsLabel.innerHTML += ' + ' + c;
}

function check()
{
    alert(x);
}
function reset()
{
    x = 0;
    resultLabel.innerHTML  = x;
    OperationsLabel.innerHTML = 'Operations: 0';
}