Edit in JSFiddle

function Calculate() {
    // Variables for cleanliness
    var start = 0,
        end = 0,
        instances = 0,
        num = 0;

    // just populate the variables.
    start = document.getElementById('txtStartRange').value;
    end = document.getElementById('txtEndRange').value;
    num = document.getElementById('txtSearch').value;

    // Do the calculation.
    for (var i = start; i <= end; i++) {
        instances += (i.toString().match(new RegExp(num.toString(), "g")) || []).length;
    }

    // Write value out.
    document.getElementById('result').innerText = instances;
}
<div class="wrap">
    <h1>Digit Instance Calculator</h1>
    <fieldset>
        <legend>
            Data Input
        </legend>
        <div class="col">
            <label for="txtStartRange">Start of Range:</label>
            <input type="number" id="txtStartRange" placeholder="e.g. 0" />
        </div>
        <div class="col">
            <label for="txtEndRange">End of Range:</label>
            <input type="number" id="txtEndRange" placeholder="e.g. 1000" />
        </div>
    </fieldset>

    <fieldset>
        <legend>
            Search for
        </legend>
        <input type="number" id="txtSearch" placeholder="e.g. 1" />
	
        <button onclick="Calculate()">Calculate</button>
        <p>e.g. find out how many times "1" appears in the range of 0 to and including 10 (it's 2 times).</p>
		
		<h3><strong>RESULT</strong></h3>
		<div id="result">No results yet.</div>
    </fieldset>

	
</div>
@import "https://fonts.googleapis.com/css?family=Roboto:400,700";
body {
    font-size: 14px;
    font-family: 'Roboto';
    text-align: center;
}

.wrap {
    width: 350px;
    margin: 0 auto;
}

fieldset {
    border: 1px solid grey;
    border-radius: 5px;
    text-align: center;
    background: white;
    margin: 1em 0;
}

legend {
    font-weight: bold;
    text-transform: uppercase;
    background: white;
    border-radius: 5px;
    padding: 5px;
}

.col {
    width: 37%;
    margin: 0 5%;
    display: inline-block;
    input[type="number"] {
        width: 100%;
    }
    label {
        font-weight: bold;
        display: block;
    }
}

#result {
	display: inline-block;
	border: 1px solid #ccc;
	padding: .4em .5em;
	border-radius: 5px;
	font-size: 1.7em;
}