如何从html代码调用函数

Question

我有 JS 代码，可以按预期工作。但是从函数调用“islandA.onclick”的插入，我需要从外部调用它 - 从 HTML 代码。 （还有更多的岛屿:)

    $(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 (); 
        };        

    });

需要的调用方式是 <img src='img/island.png' id='isladnA' onclick='hereSouldBetheCalling()'>

从https://www.php.net/manual/en/function.socket-create.php 使用（和修改）的代码 非常感谢:)

Answer 1

你可以把它放在你的 $(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)); 

});

这使用 jquery 的“on”方法来处理该元素的点击事件。如果您希望点击多张图片，您可以通过为所有这些图片分配一个公共类并使用它来识别它们，从一个定义中完成。

class="myIsland" id='isladnA' onclick='hereSouldBetheCalling()'>

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

这将绑定一个点击事件来为所有“myIsland”元素调用相同的函数。