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.

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.

• javascript
• html
• variables
• input
• textbox

• Did you place the JavaScript after the elements? Also you forgot to declare your variables, use var. – elclanrs Commented May 4, 2014 at 1:07
• the javascript is linked at the top of the page between the "head" tags. I wasn't aware it was necessary to put the var in before the start, stop. I can put that in but I still don't think it will work. – RabidGorilla Commented May 4, 2014 at 1:11
• @elclanrs The Javascript doesn't need to be before the buttons, when it is called from the buttons onclick HTML attribute. – Paul Commented May 4, 2014 at 1:15

2 Answers 2

You should get the value from the elements

document.getElementById("start").value

Make sure the script tag es after the elements.

JSFiddle: http://jsfiddle/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>