How can I dynamically generate input fields with Javascript and then use their values?

From the mdn page about innerHTML: "Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element." https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

Generally speaking you do not want to use innerHTML at all. There is almost always a better approach. In this case this will be createElement and appendChild.

Furthermore, there is no such thing as "onsubmit" method. What you are calling like that is an HTML attribute which registers a handler for the submit event. http://www.quirksmode.org/js/introevents.html

However using html attributes has its serious drawbacks: http://www.quirksmode.org/js/events_advanced.html

Considering all that, here is what I would do: http://jsfiddle.net/ashnur/rwod4z1d/

HTML:

<form id="initialForm" method="post" action="">
    <label>Number of hours for which you would like to study</label>
    <input type="number" name="overallHours" id="overallHours" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <label>Number of courses you would like to study for</label>
    <input type="number" name="courseAmount" id="courseAmount" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <input type="submit" class="submitStudy" value="Submit" />
</form>
<form id="hourForm" method="post" >
    <label>State the desired time spent working in each course</label><hr>
</form>

js:

var notedOverallHours = document.getElementById("overallHours").value * 60;
var courseNumberTotal = document.getElementById("courseAmount").value;
var counter = 0;

var initialForm = document.getElementById("initialForm");
var hourForm = document.getElementById("hourForm");

initialForm.addEventListener('submit', createInput);
hourForm.addEventListener('submit', calcHours);

function calcHours() {}

function createInput(ev) {
    ev.preventDefault(); // this is not needed if you are using a bare button and the click event
    var newForm = document.getElementById("hourForm");
    initialForm.style.display = "none";
    hourForm.style.display = "block";

    for (i = 0; i <= courseNumberTotal; i++) {
        addControl(newForm, "Course #" + (counter + 1));
        counter++;
    }
    var submit = document.createElement('input');
    submit.type = 'submit';
    submit.value = 'submit';
    newForm.appendChild(submit);
}

function addControl(form, labelText) {
    var label = document.createElement('label');
    var input = document.createElement('input');
    var hr = document.createElement('hr');
    input.type = 'number';
    input.name = 'courseHours';
    input.classname = 'newInputs';
    input.min = '1';
    input.max = '9';
    input.step = '1';
    input.value = '1';
    label.textContent = labelText;
    form.appendChild(label);
    form.appendChild(input);
    form.appendChild(hr);


}

When the createInput() function is called you are not having the desired results because you are reseting the newForm.innerHTML in each iteration of the loop and then again at the end. Rather than using = you should be using += to append the desired text rather than replace the existing text.

// Replacing the contents of newForm.innerHTML
newForm.innerHTML = "foo";

// Appending to newForm.innderHTML (You want to do this)
newForm.innerHTML += "foo";

Another problem is that when you press submit the page is reloading before createInput() is able to have the desired result. You most likely want to stop the page actually submitting and thus reloading when you press the submit button. To do this you can change the onsubmit attribute for the form to "return createInput()" and then add the line return false; to the end of the createInput() function to indicate to the browser that you do not wish to submit the form.