How do you take input from a html textbox and assign it to a javascript variable?

Question

I am trying to take two times that the user enters and run them through some javascript functions. The times are entered by two textboxes. I have been trying to use the document.getElementById("ID") method but it doesn't seem to be working and I can't figure out why. Here is the part of my code that's having an issue.

Two html cells with my input boxes and two buttons:

<tr>
<td><input type="text" name="start" id="start"></td>
<td><input type="text" name="stop" id="stop"></td>
</tr>

<tr>
<td><button onclick="master_drug()">Drug</button></td>
<td><button onclick="master_hydration()">Hydration</button></td>
</tr>

The function assigned to the button that gets the values:

function master_drug(start, stop)
    {
    start = document.getElementById("start")
    stop = document.getElementById("stop")
    alert(stop)
    calculate_drug(start, stop)
    check_infusion(start, stop)
    check_injection(start, stop)
    alert(infusion.length + " infusions: " + injection.length + " injections: " + hydration.length + " hydrations: ")
    }

It looks like this should be a simple process but I am clearly missing something.

Answer 1

You should get the value from the elements

document.getElementById("start").value

Answer 2

Make sure the script tag comes after the elements.

JSFiddle: http://jsfiddle.net/v63W6/

<tr>
    <td><input type="text" name="start" id="start"></td>
    <td><input type="text" name="stop" id="stop"></td>
</tr>
<tr>
    <td><button onclick="master_drug()">Drug</button></td>
</tr>

<script>
    function master_drug() {
        var start = document.getElementById("start").value;
        var stop = document.getElementById("stop").value;
        alert(stop);
    }
</script>