Javascript 使用函数将变量（id）从html传递到外部js文件_Javascript_Html_Html5 Canvas

Javascript 使用函数将变量（id）从html传递到外部js文件

javascript html html5-canvas

Javascript 使用函数将变量（id）从html传递到外部js文件,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我对javascript很有新意，我试图开发一个包含动态图的网页，用于画布、HTML5和javascript。我不想将html“代码”与javascript代码混用，所以我决定将其分开，并从html调用javascript函数。事实上，当我试图将我的画布Id传递给javascript函数时，我犯了一个错误，我不知道如何修复它。这是我的html代码： <html> <head> <title></title> <script t

我对javascript很有新意，我试图开发一个包含动态图的网页，用于画布、HTML5和javascript。我不想将html“代码”与javascript代码混用，所以我决定将其分开，并从html调用javascript函数。事实上，当我试图将我的画布Id传递给javascript函数时，我犯了一个错误，我不知道如何修复它。这是我的html代码：

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Funciones.js">
        window.onload = drawRectangulo('myCanvas');
    </script>
</head>
<body>
    <h1>Canvas Example:</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

我不知道javascript文件上对drawRectangulo函数的调用是否正确，也不知道我是否正确传递了画布的id:window.onload=drawRectangulo（'myCanvas'）？如何将Id从html文件传递到js函数？。我应该使用：（“”，，）还是应该创建一个新变量，用画布的id启动它并将其传递给函数？JavaScript函数中的变量id处理得好吗？

您需要这样做：

window.onload = function () {
    drawRectangulo('myCanvas');
}

代码一运行就调用drawRectangulo，并将调用结果（未定义）分配给

window.onload

根据Dan的评论编辑：您还需要更改以下内容：

document.getElementById('idCanvas');

为此：

document.getElementById(idCanvas);

编辑2：您还需要将导入的脚本与内联脚本分开，如下所示：

function drawRectangulo(idCanvas)
{
    var Canvas = document.getElementById('idCanvas');
    var context = Canvas.getContext('2d');
    context.fillRect(50,0,10,150);
}

<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>


window.onload=drawRectangulo（'myCanvas'）；

单个

元素既可以从另一个文件导入脚本，也可以定义内联脚本，或者两者兼而有之。（这就解释了为什么将内联脚本移动到HTML中的其他位置会使它工作。）

我认为

var Canvas = document.getElementById('idCanvas');

应该是

var Canvas = document.getElementById(idCanvas);

有了这些撇号，就没有引用参数。

我想我知道为什么它不起作用了。我在html上做了此更改，现在可以正常工作了：

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Funciones.js"></script>

</head>
<body>

    <script type="text/javascript" language="javascript">

        window.onload = function (){
            drawRectangulo('myCanvas');
        }
    </script>

    <h1>Canvas Example:</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>


window.onload=函数（）{
drawRectangulo（“我的画布”）；
}
画布示例：

我拿出窗口。将从头部加载到身体，效果良好。无论如何，感谢您的帮助。
drawRectangulo（idCanvas）函数似乎没有使用参数
idCanvas
谢谢大家。我已经像你说的那样改变了，但仍然不起作用。它不会在window.load上自行运行。我曾尝试在js控制台中运行：drawRectangulo（“myCanvas”）；它画了它。有什么建议吗？请看我的最新答案。这不是关于将脚本移动到主体，而是关于将现有的两段脚本分开。