tutorials/10-days-of-javascript/js10-buttons-container.html

<!DOCTYPE html>
<!--
# Tutorials > 10 Days of Javascript > Day 8: Buttons Container
# Arrange buttons in a grid.
#
# https://www.hackerrank.com/challenges/js10-buttons-container/problem
# challenge id: 21007
#
-->
<html>
    <head>
        <style>
.btnContainer {
    width: 75%;
}

.btnContainer > .btn {
    width: 30%;
    height: 48px;
    font-size: 24px;
}
        </style>
    </head>

    <body>
        <div id="btns" class="btnContainer">
            <button id="btn1" class="btn">1</button>
            <button id="btn2" class="btn">2</button>
            <button id="btn3" class="btn">3</button>

            <button id="btn4" class="btn">4</button>
            <button id="btn5" class="btn">5</button>
            <button id="btn6" class="btn">6</button>

            <button id="btn7" class="btn">7</button>
            <button id="btn8" class="btn">8</button>
            <button id="btn9" class="btn">9</button>
        </div>
        <script type="text/javascript">
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var btn5 = document.getElementById('btn5');
var btn6 = document.getElementById('btn6');
var btn7 = document.getElementById('btn7');
var btn8 = document.getElementById('btn8');
var btn9 = document.getElementById('btn9');

btn5.onclick = function() {
    let tmp = btn1.innerHTML;
    btn1.innerHTML = btn4.innerHTML;
    btn4.innerHTML = btn7.innerHTML;
    btn7.innerHTML = btn8.innerHTML;
    btn8.innerHTML = btn9.innerHTML;
    btn9.innerHTML = btn6.innerHTML;
    btn6.innerHTML = btn3.innerHTML;
    btn3.innerHTML = btn2.innerHTML;
    btn2.innerHTML = tmp;
};
        </script>
    </body>
</html>