How to multiply 2 td in Javascript?

Question

I have a table where one td gets 1 if a checkbox is checked and I would like to multiple this td with another and display it in a third one.

See the html here:

    <div>
    <input type="checkbox" id="fut1">check</input>
</div>
<table border="1" cellpadding="10" id="countit">
    <tr>
        <td id="td1"></td>
        <td id="td2">5000</td>
        <td id="td3"></td>
    </tr>
</table>

And here is the js:

$('#fut1').change(function () {
    if ($(this).is(":checked")) {
        $('#td1').text('1');
    } else {
        $('#td1').text('0');
    }
});

$('#td1').change(function () {
    var me = $('#td1').value;
    var ar = $('#td2').value;
    var sum = me * ar;
    $('#td3').text(sum);
});

If you're using jQuery please update the tags on your question to include it. — j08691, Aug 27 '15 at 13:34
Welcome to SO, please vote up any answers that helped and check the one that answered you best. Doing so helps to boost your points, as well as boost contributors points. — vol7ron, Aug 27 '15 at 17:26

score 0 · Answer 1 · answered Aug 27 '15 at 13:34

0

#td1 doesn't support the change event, because that's only meant for interactive elements (like input, select, or textarea).

You can either do the calculation in your first event listener in #fut1, or declare an input element inside #td1.

answered Aug 27 '15 at 13:34

Arturo Torres Sánchez

2,751
4
20
33

1

@Vohuman, I honestly only see that, but you can also add your answer with your observations – Arturo Torres Sánchez Aug 27 '15 at 13:37

score 0 · Accepted Answer · answered Aug 27 '15 at 13:38

$('#td1').change(function () {  // <--- td elements don't have a change event listener/handler
    var me = $('#td1').value;   // <--- td elements don't have a value
    var ar = $('#td2').value;   // <--- td elements don't have a value
    var sum = me * ar;
    $('#td3').text(sum);
});

If you want to do it this way:

$('#fut1').change(function () {
    if ($(this).is(":checked")) {
        $('#td1').text('1');
    } else {
        $('#td1').text('0');
    }
    callTdChange();
});

function callTdChange() {
    var me = parseInt($('#td1').text());
    var ar = parseInt($('#td2').text());
    var sum = me * ar;
    $('#td3').text(sum);
}

Of course, the better way should be to use form elements (inputs) in the case you want to save your data to a server, or use change behaviors.

How to multiply 2 td in Javascript?

2 Answers2