Javascript 拉斐尔与“全局”变量

我正试图和拉斐尔一起做一些SVG的东西，并且尝试，用我有限的知识，去构建一些美丽的东西； 我有3个文件： 1x html文件和2xjs文件 html文件：带有onload函数+头、体和其他内容

window.onload=function()
{
    init();
}

js File1：具有init函数和加载js文件（如Raphael）的函数，并在加载文件后进行回调

function init()
{
    getScripts(initTool)
}

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
} 

function initTool()
{
    $('body').append("<div id='tool'></div>");
    tool=Raphael("tool",5000,5000);
    $('body').append("<a href='javascript:void(0)' onclick='newElement'>New element</a>")
}

不幸的是，这条路没有出现，我也不知道为什么。我尝试在onload之前引用工具变量，以防它与全局/局部变量的猜测有关，但这也不起作用。将svg元素的id从tool更改为tool2也不起作用

---

还可能是什么？我可能存在的明显盲点在哪里？

回调不应该在这里声明为参数吗

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
} 

---

老实说，我已经编写了相当多的javascript，但还没有完全了解变量的作用域。但是，在调用函数时，您应该使用括号来指示应该执行它。有时，您在没有括号的情况下引用它们，但这超出了本答案的范围

所以

以下是一个可行的解决方案：

---

也许有人可以解释为什么需要这些更改，但我自己并不理解。

问题与变量范围无关。在内联事件处理程序中，只需在函数名后面加括号即可。将最后一行改写为：

$('body').append("<a href='javascript:void(0)' onclick="newElement()">New element</a>")

你就可以开始跑步了

然而，由于各种原因，内联事件处理程序不受欢迎。正如所说：尽管内联事件注册模型是古老而可靠的，但它有一个严重的缺点。它要求您在XHTML结构层中编写JavaScript行为代码，而XHTML结构层不属于该层

一种更简洁的方法可以将标记和脚本分离开来，例如：

<div id='tool'></div>
<a id="mylink" href='#'>New element</a>

<script>
var tool = Raphael("tool",500,500);

$('#mylink').on("click", function() {
    tool.path("M10,20L30,40");
});
</script>

有关此代码的实际操作，请参见此

---

最后，作为一个有用的提示，我建议在DocumentReady上运行代码，而不是窗口加载，尤其是在使用jquery时，。文档就绪发生在首次构造DOM时。窗口加载等待所有资产完全加载，这可能需要一段时间，通常不需要。很抱歉，getScripts确实是getScriptscallback。当我试图最小化问题的代码时，我忘记了。我会马上编辑原始问题。谢谢！很好，很有效！非常感谢你。但我不知道为什么它与以前的实现不同。如果有人能解释，那就太好了，否则当我遇到同样的问题时，我不得不再次询问，而我却没有意识到；

var newElement = function() {
    tool.path("M10,20L30,40");
}

$('body').append("<a href='javascript:void(0)' onclick="newElement()">New element</a>")

<div id='tool'></div>
<a id="mylink" href='#'>New element</a>

<script>
var tool = Raphael("tool",500,500);

$('#mylink').on("click", function() {
    tool.path("M10,20L30,40");
});
</script>