i am having a problem getting my js file to work with my html file

here is my jsfile

function calculateTotal () {
var hours = document.getElementByName("hours")[0].value;
    alert(please enter a number)
var payrate = document.getElementByName("payrate")[0].value;
    alert(please enter a number)
var pay = document.getElementByName("pay")[0].value;

if (hours <= 40){
    pay = (hours * payrate)
}
else if (hours >40) {
        pay = (hours * payrate) + (hours - 40) * payrate * 1.5;
}
}

and here is my html file

    <table> 
        <tr>
            <td width="135">Weekly hours worked</td>
            <td width="144"><input type="text" name="hours" /></td> 
    </tr> 
    <tr>
        <td>Pay per hour</td>
      <td><input type="text" name="payrate" /></td>
    </tr>
    <tr>
        <td>Weekly pay</td>
            <td><input type="text" value="document.getElementsByName(“pay”)[0].value = pay" name="pay" onclick="calculateTotal" /></td>  
                </tr>
        <tr>
            <td colspan="2" style="text-align: center"> 
                    <button>Calculate</button>
            </td> 
         </tr>
    </table> 

i am trying to get the javascript function to go into the html text feild for <td>weekly pay</td> any thoughts of what i am doing wrong

Recommended Answers

All 5 Replies

There are several issues I see right off the bat:

In the Javascript file:

  1. The function getElementByName should be getElementsByName (note the "s").
  2. The strings in the alerts need to be enclosed in quotes like alert("please enter a number"). Also you should put a semicolon after the alerts (and all statements, really), alert("please enter a number");
  3. You are calculating the value of pay but since pay is just scalar value and is not a reference to the actual value of the text box, you need a different way to target the actual value of the text box. After you calculate pay you could simply do document.getElementsByName("pay")[0].value = pay;
  4. Get rid of the value for the text input. Instead of value="document.getElementsByName(“pay”)[0].value = pay" just use value="" (also, those fancy quotes (“ and ”) will break code as well, so they should be avoided in any code; just use regular single and double quotes.
  5. You probably want to move the onclick event to the button instead of the text field. <button onclick="calculateTotal">Calculate</button>
  6. It might work as is, but I think you also need to put parenthesis after calculateTotal so that it will be executed. <button onclick="calculateTotal()">Calculate</button>

Those are the things that jump out at me as being wrong with the code. I haven't actually tested any of it yet, but you should start by addressing these issues.

where do i put line 4 in the like this

<tr>
        <td>Weekly pay</td>
            <td><input type="text" value=" " name="pay" /></td>  
</tr>

or

<tr>
        <td>Weekly pay</td>
            <td><input type="text" name="pay" /></td>  
            <script>
            document.getElementsByName("pay")[0].value = " ";
            </script>            
                </tr>
        <tr>

thank you for your help this is my firts time doing this

The column for weekly pay would simply look something like this:

<td>
    <input type="text" value="" name="pay" />
</td>

Then in Javascript to set the textbox value you would do this:

// ...

if (hours <= 40){
    pay = (hours * payrate)
}
else if (hours >40) {
    pay = (hours * payrate) + (hours - 40) * payrate * 1.5;
}

// This next line is what would set the value of the textbox to pay:
document.getElementsByName("pay")[0].value = pay;

// ...

thank you for your help dcdruck i am new to javascript and i have been working on this for the last couple of day. i know this was a simple task but thank you. one last question is there a time you are supposed to add to it so it will display in the text field? when i hit calculate button it shows up for a quick second then disappears

Javascript:

function calculateTotal () {
    var hours = document.getElementsByName("hours")[0].value;
    if (!hours) alert("please enter a number of hours");
    var payrate = document.getElementsByName("payrate")[0].value;
    if (!payrate) alert("please enter a number for payrate");
    var pay = document.getElementsByName("pay")[0].value;

    if (hours <= 40){
        pay = (hours * payrate)
    }
    else if (hours >40) {
            pay = (hours * payrate) + (hours - 40) * payrate * 1.5;
    }

    document.getElementsByName("pay")[0].value = pay;
}

HTML:

    <table> 
        <tr>
            <td width="135">Weekly hours worked</td>
            <td width="144"><input type="text" name="hours" /></td> 
    </tr> 
    <tr>
        <td>Pay per hour</td>
      <td><input type="text" name="payrate" /></td>
    </tr>
    <tr>
        <td>Weekly pay</td>
            <td><input type="text" value="" name="pay" /></td>  
                </tr>
        <tr>
            <td colspan="2" style="text-align: center"> 
                    <button onclick="calculateTotal()">Calculate</button>
            </td> 
         </tr>
    </table> 
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.