How to get return value as an object from a click function (Javascript)?

Question

I want to get cell value from a table by clicking the button. I already made a getDetail function using Javascript implemented on the button, but I cannot return the value from the function.

<button class='btn btn-secondary' onclick='getDetail()'>Detail</button>

Here is my Javascript function to get the detail from the table:

function getDetail(){

        // get element value
        var table = document.getElementById("tableID");
        var myResult = {"db":"postgres"};

        if (table) {
            for (var i = 0; i < table.rows.length; i++) {
                table.rows[i].onclick = function() {
                    tableText(this);
                };
            }
        }

        function tableText(tableRow) {
            var schName = tableRow.childNodes[1].innerHTML;
            var tblName = tableRow.childNodes[2].innerHTML;
            var obj = {'table_name': tblName};

            return obj;
        }

        let myData = Object.assign(myResult, obj);
        console.log(myData);

        $.ajax({
            error:function (xhr, status, error) {
                var err_msg = ''
                
                for (var prop in xhr.responseJSON) {
                    err_msg += prop + ': ' + xhr.responseJSON[prop] + '\n';
                }
                console.log(err_msg)
            },

            success: function(){
                console.log(obj)
            }
        });
    }

I want to return obj value as an object. After that, I will combine it with other objects as an input in my AJAX function (later it will be combined with API response).

However, I cannot return the obj value from the previous function.

Error:

dashboard:511 Uncaught ReferenceError: obj is not defined
    at Object.success (dashboard:511)
    at c (VM10029 jquery.min.js:2)
    at Object.fireWith [as resolveWith] (VM10029 jquery.min.js:2)
    at l (VM10029 jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (VM10029 jquery.min.js:2)

Expected output when button is clicked:

{db: 'postgres', table_name: 'actor'}

Could you please help me to solve this problem? because I am a new learner with javascript. Thank you.

In the `table.rows[i].onclick` event shouldn't you return `tableText(this);`? I think you're actually missing a `return` there. Your `tableText` is just returned to the anonymous function and then goes nowhere, i.e. it's not returned by the `onclick`. — Dropout, Nov 22 '21 at 13:02
You can't return from an `onclick` function because you're previous function isn't going to pause in the middle of itself and wait for the user to click something (unless you create a Promise and `await` it) — Quentin, Nov 22 '21 at 13:14

score 0 · Answer 1 · answered Nov 22 '21 at 13:08

0

You are not returning the value in function call

function getDetail(){

        // get element value
        var table = document.getElementById("tableID");
        var myResult = {"db":"postgres"};

        if (table) {
            for (var i = 0; i < table.rows.length; i++) {
                table.rows[i].onclick = function() {
          //modified code         
          return tableText(this);
                };
            }
        }

answered Nov 22 '21 at 13:08

abhi patil

504
2
11

Returning there is pointless. The value will always be an object and returning anything other that `false` from an `onclick` does nothing. – Quentin Nov 22 '21 at 13:11

How to get return value as an object from a click function (Javascript)?

1 Answers1