How to call the function from htmlcode

Question

I have JS code, that works as it supposed to. But insetad of calling "islandA.onclick" from the function, I need to call it from the outside - from HTML code. (there are more islands :)

    $(document).ready(function(){
        var islandA = document.getElementById("ostrovA");

        var websocket = new WebSocket("ws://localhost:8090/php-socket.php");
        
        islandA.onclick = function(event) {
                var messageJSON = {
                    team: '0001',
                    function: 'moveBoat'
                };
                websocket.send(JSON.stringify(messageJSON)); 
        }
        websocket.onmessage = function(event) {
            var Data = JSON.parse(event.data);
            moveBoat (); 
        };        

    });

The needed way of calling is <img src='img/island.png' id='isladnA' onclick='hereSouldBetheCalling()'>

Code used (and modified) from https://www.php.net/manual/en/function.socket-create.php Thank you so much :)

Answer 1

You can place this in your $(document).ready

var websocket = new WebSocket("ws://localhost:8090/php-socket.php");
 
 
$('#islandA').on('click', function(){

    var messageJSON = {
        team: '0001',
        function: 'moveBoat'
    };
    websocket.send(JSON.stringify(messageJSON)); 

});

This uses jquery's "on" method to handle a click event for that element. If you have multiple images you wish to click on, you can do it from a single definition by assigning a common class to all those images and using that to identify them.

<img src='img/island.png' class="myIsland" id='isladnA' onclick='hereSouldBetheCalling()'>

$('.myIsland').on('click', function(e){
    // $(e.target)
    //    or
    // $(this)
}

That will bind a click event to call the same function for all "myIsland" elements.