在Dragstart事件上无法识别功能

Question

A function getId is not getting called on dragstart in html. The code looks simple and correct, I am not sure why it isn't getting called

HTML code:

<div id="content">
    <div style="position: relative; height: 100%;">
        <div style="display: inline-block; height: 100%; vertical-align: top; border-right: 2px solid darkcyan;" id="sidebar">
            <div><a id="newTask" title="Add new task" draggable="true" ondragstart=getId(this.id)><img src="task.png" /></a></div>
        </div>
<div id="canvas" tabindex="0"></div>
<div id="tabbar"></div>
    </div>
</div>

JS:

window.onload = function ()
{
    var svg = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height", 803);

    function getId(id)
    {
        var shapeId = id;
        console.log(shapeId);
    }
};

Its throwing an error saying: Uncaught ReferenceError: getId is not defined

Answer 1

You've declared your getId function within the onload function - ie it's not in a scope where it can be invoked via the event.

Move it outside the onload function:

window.onload = function ()
{
    var svg = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height", 803);


};

function getId(id)
{
    var shapeId = id;
    console.log(shapeId);
}

Answer 2

Try this:

window.onload = function ()
{
    var svg = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height", 803);
};

    function getId(id)
    {
        var shapeId = id;
        console.log(shapeId);
    }

Function getId is not visible due to function scope it's defined. Make it global. (Further refactoring will be required).