want to call a javascript function through add event listener in td of a row

Question

I have done the following.

<td class="text-center"><a href="#" title="" id="signal_<?=$rs['signal_id']?>"  addEventListener('click','editSignal(this)') data-toggle="modal" data-target="#send_distress_modal"><i class="fa fa-edit"></i></a></td>
            <td class="text-center"><a href="#" title="" id="signal_<?=$rs['signal_id']?>" onclick="deleteSignal(this);"><i class="fa fa-trash"></i></a></td>

I had it done using onclick but want to do the same using addeventlistener('click,'anyFunction'). Because when I use onclick it gives the folowing error;

VM7707 log:330 Uncaught ReferenceError: editSignal is not defined
at HTMLAnchorElement.onclick (VM7707 log:330)

These are the functions below there is some problem with both they give error when clicked. Can't figure out what is the problem.

<script type="text/javascript">
function editSignal(obj) {
    // alert(obj.id);
    var obj_id = obj.id;
    var id = obj_id.split("_");
    console.log(id);
    let _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: 'send_distress_signal',
        type: 'POST',
        dataType: 'json',
        data: {edit_signal_id: id[1],
        //  _token: _token
         }},
    })
    .done(function(result) {
        console.log(result);
        $('#description').val(result['description']);
        $('#resType').val(result['resource_type']);
        $('#res').val(result['resource']);
        $('#resource_hidden').val(result['resource']);
        $('#location').val(result['location']);
        $('#edit_flag_signal').val(result['signal_id']);
        populateResource();
    })
    .fail(function() {
        alert("error");
    });

}

function deleteSignal(obj) {
    // alert(obj.id);
    var obj_id = obj.id;
    var id = obj_id.split("_");

    $.ajax({
        url: 'includes/sendDistress_action.php',
        type: 'POST',
        data: {del_signal_id: id[1]},
    })
    .done(function(result) {
        if(result=="Success"){
            location.reload();
        }else{
            alert("Some error occured");
        }
    })
    .fail(function() {
        alert("error");
    });
}

$('#distress_btn').on('click', function(event) {
    event.preventDefault();
    /* Act on the event */
    $('#description').val('');
    $('#resType').val('');
    $('#res').val('');
    $('#resource_hidden').val('');
    $('#location').val('');
    $('#edit_flag_signal').val('0');
});

Thanks.

Does this answer your question? [How to use addEventListener](https://stackoverflow.com/questions/13771025/how-to-use-addeventlistener) — Simone Rossaini, Apr 08 '21 at 07:03
Have you got a Javascript function called editSignal somewhere? If so onclick="editSignal(this)" should have worked. Your use of addEventListener in that context is incorrect. — A Haworth, Apr 08 '21 at 07:22
Yes I have the fuction but it says VM8855 log:330 Uncaught ReferenceError: deleteSignal is not defined at HTMLAnchorElement.onclick (VM8855 log:330) — Hamza Khan, Apr 08 '21 at 07:25
I have edited the code above thats the script I'm using and it gives the error I have mentioned in the comment above. — Hamza Khan, Apr 08 '21 at 08:33

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

These are just test codes for the example. Focus on the <script> parts. If you want to use addEventListener you have to use it in a script section by the event target which is well noted in the documentation.

<html>
  <head>
    <style>
      table {
        width: 100%;
        border: 1px solid black;
      }
      td {
        width: auto;
        height: auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <script type="text/javascript">
    var td1ClickCount = 0;
    function customClickFunction() {
      clickCount += 1;
      console.log("clickCount : " + clickCount);
    }
    function editSignal(element) {
      console.log("editSignal From id : " + element.id);
    }
    function deleteSignal(element) {
      console.log("deleteSignal From id : " + element.id);
    }
  </script>
  <body>
    <table>
      <tr>
        <td id="td1" class="text-center">
          <a href="#" title="" id="signal_1" onclick="editSignal(this);">
            <i class="fa fa-edit">signal_1</i>
          </a>
        </td>
        <td id="td2" class="text-center">
          <a href="#" title="" id="signal_2" onclick="deleteSignal(this);">
            <i class="fa fa-trash">signal_2</i>
          </a>
        </td>
      </tr>
    </table>
  </body>
  <script type="text/javascript">
    //EventTarget.addEventListener(type, listener, ...);
    document.getElementById("td1").addEventListener('click', function(event){
      td1ClickCount += 1;
      console.log(event.target + " click count: " + td1ClickCount);
    });
  </script>
</html>

FossMentor · Answer 2 · 2021-04-08T14:38:50.547

Kindly avoid adding the 'addEventListener' in the HTML element but use in the tag either in the same HTML or external js file. I noticed few issues in the HTML and javascript code so I suggest you the following change in the HTML and Javascript code. I'm sure it will work fine.

Don't use the id="signal_..." but use row-id="signal_..." this way both edit and delete elements will not have the same Id. The same Id doesn't follow the HTML standard rules.
Remove the 'addEventListener' from the HTML element and use the alternative way in the javascript section.
Add the class attributes and register the event listener with this class attrib which also follows the HTML standard rules.

<td class="text-center"><a href="#" class="editSignal" title="" row-id="signal_<?=$rs['signal_id']?>"  data-toggle="modal" data-target="#send_distress_modal"><i class="fa fa-edit"></i></a></td>
<td class="text-center"><a href="#" title="" class="deleteSignal" row-id="signal_<?=$rs['signal_id']?>" ><i class="fa fa-trash"></i></a></td>

Then use the following javascript function in your script section.

$(document).on('click','.editSignal',function(){
    var obj_id = $(this).attr('row-id');
    //alert(obj_id);
    var id = obj_id.split("_");
    console.log(id);
    //return;
    let _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: 'send_distress_signal',
        type: 'POST',
        dataType: 'json',
        data: {edit_signal_id: id[1]},
        //  _token: _token
    }).done(function(result) {
        console.log(result);
        $('#description').val(result['description']);
        $('#resType').val(result['resource_type']);
        $('#res').val(result['resource']);
        $('#resource_hidden').val(result['resource']);
        $('#location').val(result['location']);
        $('#edit_flag_signal').val(result['signal_id']);
        populateResource();
    }).fail(function() {
        alert("error");
    });
});

$(document).on('click','.deleteSignal',function(){
    var obj_id = $(this).attr('row-id');
    var id = obj_id.split("_");
    console.log(id);
    //return;
    $.ajax({
        url: 'includes/sendDistress_action.php',
        type: 'POST',
        data: {del_signal_id: id[1]},
    })
    .done(function(result) {
        if(result=="Success"){
            location.reload();
        }else{
            alert("Some error occured");
        }
    })
    .fail(function() {
        alert("error");
    });
});

Hopefully, it will work now. If it still doesn't work then please send me the HTML and Javascript code to review and I will provide you the solution accordingly.

want to call a javascript function through add event listener in td of a row

2 Answers2