For, Break, Continue

by Marventus

HTML

<div class="buttons">
    <button id="whileBtn">For</button>
    <button id="doWhileBtn">For Break</button>
</div>

<div class="container">
    <h3>For:</h3>
    <div id="whileCont"></div>
</div>

<div class="container">
    <h3>For (with Break):</h3>
    <div id="doWhileCont"></div>
</div>

CSS

div.container {
    float: left;
    width: 50%;
}

JavaScript

function forFn() {
    for(var i = 1; i < 11; i++) {
        forC.innerHTML = forC.innerHTML + i + "<br>";
    }
}

function forBreakFn() {
    for(var i = 1; i < 11; i++) {
        if( i === 5)
            break;
        forBreakC.innerHTML = forBreakC.innerHTML + i + "<br>";
    }
}

var forC = document.getElementById("whileCont"),
    forBreakC = document.getElementById("doWhileCont"),
    forB = document.getElementById("whileBtn"),
    forBreakB = document.getElementById("doWhileBtn");

forB.addEventListener("click", forFn, false);
forBreakB.addEventListener("click", forBreakFn, false);