Попытка вызова двух функций в одном поле ввода, но только одна

Question

У меня есть две рабочие функции, которые я хочу назначить двум входам:

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

Я хотел бы иметь возможность использовать displayHoras (); onkeyup для тех двоих тоже. (2 много 2s в этой теме уже). когда я использую 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();"/>

Любая помощь будет приветствоваться.

Я поделюсь кодом обеих функций, потому что ... кто знает? Проблема может быть там, верно?

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

РЕДАКТИРОВАТЬ: я добавил функции, которые создают таблицу ниже.

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

На данный момент, действие по какой-то причине даже не прикреплено.

Edit2: я решил проблему !!! IUPI !! это была эта строка: var totalDays = tableRows.length - 3;

В предыдущей версии этой формы я использовал 3 дополнительных строки, мой клиент попросил меня добавить пару дополнительных для налога и без налога. Я изменил это на: var totalDays = tableRows.length - 5; И это исправило!

Answer 1

Вы можете создать одну функцию, которая вызывает обе функции

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

Answer 2

Я бы порекомендовал создать функцию, которая затем вызывает ваши две функции, например ::10000

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

Поместить слишком много текста в атрибуты onXYZ проблематично (хотя я не сразу вижу, почему ваш не работает).

---

Не по теме 1 : я бы также предложил подключить обработчики событий с использованием методов DOM2 (addEventListener в браузерах, соответствующих стандартам, attachEvent в IE8 и ниже) вместо использования механизмов DOM0, таких как onXYZ атрибуты.

Не по теме 2 : библиотека JavaScript, такая как jQuery , Прототип , YUI , Закрытие , или любой из нескольких других может помочь сгладить различия в браузере (и даже ошибки), такие как прикрепленные к событию события, а также предоставить множество полезных функциональных возможностей. Абсолютно необязательно, но использование одного из них поможет вам сконцентрироваться на том, что вы на самом деле пытаетесь сделать, не беспокоясь о слегка различающихся настройках в разных браузерах.

Answer 3

javascript старой школы ^^

попробуйте это вместо варианта атрибута и используйте 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;
}

Answer 4

Попробуйте вызвать вторую функцию с помощью самой первой функции,

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

 displayHoras();

}