尝试在同一输入字段上调用两个函数，但仅调用一个

Question

I have two working functions which I want to assign to two inputs:

<input type="text" id="start0" value="0" name="start[]" onkeyup="displayTotal();"/>
<input type="text" id="end0" value="0" name="end[]"  onkeyup="displayTotal();"/>

I would like to be able to use a displayHoras(); onkeyup for those two too. (2 many 2s on this thread already). when I use displayHoras(); instead of displayTotal(); it works, but when I call both of them like this it doesnt:

<input type="text" id="start0" value="0" name="start[]" onkeyup="displayTotal();displayHoras();"/>
<input type="text" id="end0" value="0" name="end[]"  onkeyup="displayTotal();displayHoras();"/>

Any help will be welcomed.

I'll share the code of both functions because...who knows? The problem might be there, right?

function displayTotal()
{
   var tableRows = document.getElementById('budgetTable').getElementsByTagName('tr');
   var totalDays = tableRows.length - 3; //Don't count the header rows and the Total rows

   var totalPrice = 0;

   var price = filterNum(document.getElementById( 'txtPrice' ).value);
   var totalField = document.getElementById( 'txtTotal' );

   var tempHours = 0;
   var tempTotal = 0; 

   for(var i = 0; i < totalDays; i++)
   {
       tempHours = document.getElementById("end" + i).value - document.getElementById("start" + i).value;
       tempTotal = tempHours * price;

       document.getElementById("total" + i).innerHTML = formatCurrency(tempTotal);
       totalPrice += tempTotal;
   }
   totalField.value = formatCurrency(totalPrice*1.21); 
}

function displayHoras()
{
    var tableRows = document.getElementById('budgetTable').getElementsByTagName('tr');
    var totalDays = tableRows.length - 3;

    var tempHours = 0;
    var tempTotal = 0;

    for(var i = 0; i < totalDays; i++)
    {
       tempHours = document.getElementById("end" + i).value - document.getElementById("start" + i).value;
       document.getElementById("totalHoras" + i).innerHTML = tempHours;         
    }    
}

EDIT: I added the functions that create the table below.

function keyUpCall() {displayHoras(); displayTotal();}
function addRowToTable()
{
    var tbl = document.getElementById('budgetTable');
    var lastRow = tbl.rows.length - 4;
    var iteration = lastRow;
    var entry = iteration - 1; //because we started with day0, etc 
    var row = tbl.insertRow(lastRow);

    // day cell
    var cellDay = row.insertCell(0);
    cellDay.appendChild(createInput('text','dia' + entry, '', keyUpCall, 'dia' + entry));

    // start cell
    var cellStart = row.insertCell(1);
    cellStart.appendChild(createInput('text','start' + entry, 0, keyUpCall, 'start' + entry));

    // end cell
    var cellEnd = row.insertCell(2);
    cellEnd.appendChild(createInput('text','end' + entry, 0, keyUpCall, 'end' + entry));

    // precio unitario
    var cellPrecioUnitario = row.insertCell(3);
    cellPrecioUnitario.appendChild(createInput('text', null, '$36', null, null));

    // total HOras
    var cellTotalHoras = row.insertCell(4);
    cellTotalHoras.id = 'totalHoras' + entry;

    // total cell
    var cellTotal = row.insertCell(5);
    cellTotal.id = 'total' + entry;

}

function createInput(type, id, value, action, name)
{   
    var el = document.createElement('input');
    el.type = type;
    el.id = id;
    el.value = value;
    el.onkeyup = action;
    el.name = name;
    return el;
}

At this point, the action is not even attached for some reason.

Edit2: I SOLVED THE PROBLEM!!! IUPI!! it was this line: var totalDays = tableRows.length - 3;

In the previous version of this form I was using 3 extra rows, my client got me to add a couple extra ones for Tax and without Tax result. I changed it to: var totalDays = tableRows.length - 5; And that fixed it!

Answer 1

您可以创建一个调用两个函数的函数

function function1(){ displayTotal(); displayHoras();}

Answer 2

I'd recommend creating a function that then calls your two functions, eg:

function handleKeyUp() { // Or `updateDisplay` or some such
    displayTotal();
    displayHoras();
}

Putting too much text within the onXYZ attributes is problematic (though I'm not immediately seeing why yours isn't working).

---

Off-topic 1 : I'd also suggest hooking up event handlers using DOM2 methods ( addEventListener on standards-compliant browsers, attachEvent on IE8 and below) rather than using DOM0 mechanisms like onXYZ attributes.

Off-topic 2 : A JavaScript library like jQuery , Prototype , YUI , Closure , or any of several others can help smooth over browser differences (and even bugs) like the event attachment stuff above, as well as providing lots of handy utility functionality. Totally optional, but using one helps you concentrate on what you're actually trying to do, without worrying about slightly different plumbing in various different browsers.

Answer 3

old school javascript ^^

try this instead of the attribute variant, and use bugzilla, or a javascript debugger

var checks_keyup = function() {
    displayTotal();
    displayHoras();
}

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++) {
    if(/^(start|end)/.test(inputs[i].id))
        inputs[i].onkeyup = checks_keyup;
}

Answer 4

Try calling second function withing the first function itself,

function displayTotal()
{
\\.....your code

 displayHoras();

}