(JavaScript) Попытка вызова метода через CheckBox

Question

В основном у меня есть метод PHP, который загружает таблицу из базы данных на сервере (phone_table). Все работает отлично. Когда он печатает таблицу в последнем столбце только флажок, и его напечатанный с помощью этого кода Повсеместно в PHP:

echo "<td><input type='checkbox' id=$i onlick=getSubtotal($i)" . $a[$j+1] . "</td>"; 

Это метод getSubtotal (а) из JavaScript, в комплекте с предупреждениями отладки:

function getSubtotal(a) { 
alert("called"); 
var table_ph = document.getElementById("phone_table"); 
var cellNo = table_ph.rows.item(a).cells; 
var cellVal = document.getElementById(a); 
alert("localStorage = " + localstorage.ttl); 
alert("Called"); 

if(cellVal.checked == 1){ 
    cellVal = cellNo.item('5').textContent; 
    var sub = parseFloat(localstorage.ttl); 
    var num = parseFloat(cellVal); 
    alert("Checked"); 
    sub = sub + num; 
    localstorage.ttl = sub; 
    document.getElementById("subtotal").innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    alert(localstorage.ttl); 
} if(cellVal.checked == 0){ 
    cellVal = cellNo.item('5').textContent; 
    var sub = parseFloat(localstorage.ttl); 
    var num = parseFloat(cellVal); 
    sub = sub - num; 
    localstorage.ttl = sub; 
    document.getElementById('subtotal').innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
      } 
} 

Любая помощь была бы блестящей, потому что это заставляет меня отвлекаться. Cheers Guys,

Answer 1

Во-первых, вы можете изменить

if(cellVal.checked == 1) { 
    // ... 
} 
if(cellVal.checked == 0) { 
    // ... 
} 

к

if(cellVal.checked) { 
    // ... 
} else { 
    // ... 
} 

Оба блока также имеет много линий (они дублируются), так что вы можете просто поставить их перед/после if заявления. Кроме того, эта линия неправильна:

cellVal = cellNo.item('1').textContent; 

cellVal является ссылкой на элемент DOM. Таким образом, изменяя это значение делается

cellVal.value = cellNo.item('1').textContent; 

Следующая вещь, что ваши id атрибуты не являются действительными (они не могут быть просто номер).

Однако - слишком много логики, которая кажется неуместной или неправильной, что я не могу улучшить, не зная, что этот код должен делать.

• Что такое localstorage? Название предполагает сходство с HTML5 localStorage, но здесь ничего здесь не делается.
• Почему вы обрабатываете a по-разному? Почему это и индекс, и идентификатор? Это особенно не будет работать после использования действительных идентификаторов.
• Угадав, что вы хотите добавить значения, которые были отмечены, я не вижу, что будет полезно для sub - num.

Наконец, как упоминалось ранее, вы должны узнать о Separation of Concerns. Не смешивайте HTML с Javascript.

---

Редактировать: Принимая дикое предположение на то, что вы хотите достичь, это то, что я думаю: Fiddle

_{(Примечание: Моя скрипка будет работать только для IE9 + из-за Array.prototype.forEach и document.querySelectorAll.Только можно обойтись, или, конечно же, вы можете использовать альтернативы, но, поскольку я просто пытался догадаться, я не заботился о совместимости браузера).}

Answer 2

Вам не хватает скобки закрывающего угла на вашем поле ввода, а также отсутствуют отдельные одинарные кавычки вокруг значений ваших атрибутов. У вас есть:

echo "<td><input type='checkbox' id=$i onlick=getSubtotal($i)" . $a[$j+1] . "</td>"; 

Сделать это и посмотреть, если это исправляет проблему:

echo "<td><input type='checkbox' id='$i' onclick='getSubtotal($i)' />" . $a[$j+1] . "</td>"; 

Update: Как для JavaScript, убедитесь, что вы передаете (a-1) в коллекцию rows.item поскольку JavaScript использует подсчет на основе 0! Также вы жёстко cellNo.item('5') - если вы хотите 5-й ячейки, убедитесь, что вы изменить что cellNo.item('4'):

function getSubtotal(a) { 

    var table_ph = document.getElementById("phone_table"); 
    var cellNo = table_ph.rows.item(a-1).cells; 
    var cellVal = document.getElementById(a); 

    if(cellVal.checked == 1){ 
     cellVal = cellNo.item('5').textContent; 
     var sub = parseFloat(localstorage.ttl); 
     var num = parseFloat(cellVal); 
     sub = sub + num; 
     localstorage.ttl = sub; 
     document.getElementById("subtotal").innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    } 

    if(cellVal.checked == 0){ 
     cellVal = cellNo.item('5').textContent; 
     var sub = parseFloat(localstorage.ttl); 
     var num = parseFloat(cellVal); 
     sub = sub - num; 
     localstorage.ttl = sub; 
     document.getElementById('subtotal').innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    } 
} 

Update # 2: Вот рабочая JSFIDDLE, что не 100% соответствия кода, но должен показать вам, что это работает:

http://jsfiddle.net/GvkN2/