javascript 试图在同一个输入字段上调用两个函数但只调用一个

Trying to call two functions on the same input field but only calls one

提问by biggest_rage

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:

我希望能够使用 displayHoras(); 这两个也是onkeyup。（这个线程上已经有 2 个 2 了）。当我使用 displayHoras(); 而不是 displayTotal(); 它有效，但是当我这样称呼它们时，它不会：

<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, '', 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;

Edit2：我解决了问题！！！IUPI！！这是这一行： 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!

在此表单的先前版本中，我使用了 3 个额外的行，我的客户让我为税收和无税收结果添加了几个额外的行。我把它改成： var totalDays = tableRows.length - 5; 这解决了它！

回答by VirtualTroll

You can create a single function that calls both functions

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

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

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

回答by T.J. Crowder

I'd recommend creating a function that then calls your two functions, e.g.:

我建议创建一个函数，然后调用您的两个函数，例如：

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

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

在onXYZ属性中放置太多文本是有问题的（虽然我没有立即明白为什么你的不工作）。

---

---

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

题外话 1：我还建议使用 DOM2 方法（addEventListener在符合标准的浏览器、attachEventIE8 及更低版本上）而不是使用 DOM0 机制（如onXYZ属性）连接事件处理程序。

Off-topic 2: A JavaScript library like jQuery, Prototype, YUI, Closure, or any of several otherscan 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.

题外话 2：像jQuery、Prototype、YUI、Closure或其他任何一个 JavaScript 库可以帮助消除浏览器差异（甚至错误），例如上面的事件附件内容，并提供许多方便的实用程序功能。完全可选，但使用一个可以帮助您专注于实际尝试做的事情，而不必担心各种不同浏览器中的管道略有不同。

回答by Felipe Buccioni

old school javascript ^^

老派 JavaScript ^^

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

试试这个而不是属性变体，并使用 bugzilla 或 javascript 调试器

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;
}

回答by Jayantha Lal Sirisena

Try calling second function withing the first function itself,

尝试使用第一个函数本身调用第二个函数，

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

 displayHoras();

}