将变量（id）从html传递到带有函数的外部js文件答案

【问题标题】：passing a variable (id) from html to external js file with functions将变量（id）从html传递到带有函数的外部js文件
【发布时间】：2013-05-17 20:08:53
【问题描述】：

我对 javascript 很陌生，我尝试使用该画布、html 5 和 javascript 开发一个带有动态图的网页。我不想将 html“代码”与 javascript 代码混合，所以我决定将它分开并从 html 调用 javascript 函数。事实是，当我尝试将 canvas 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 文件是这样的：

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

我不知道对 javascript 文件的 drawRectangulo 函数的调用是否正确，以及我是否正确传递了画布的 ID：window.onload = drawRectangulo('myCanvas'); ¿我应该如何将 html 文件中的 Id 传递给 js 函数？我应该使用: ('', "",) 还是应该创建一个新变量，使用画布的 id 启动它并将其传递给函数？我在 JavaScript 函数中处理好变量 id 吗？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

你需要这样做：

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

您的代码一运行就调用drawRectangulo，并将调用结果（即undefined）分配给window.onload。

编辑基于 Dan 的评论：您还需要更改此内容：

document.getElementById('idCanvas');

到这里：

document.getElementById(idCanvas);

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

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

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

【讨论】：

drawRectangulo(idCanvas) 函数似乎没有使用参数idCanvas
谢谢大家。我按照你说的改了，还是不行。它不会在 window.load 上自行运行。我尝试在 js 控制台中运行： drawRectangulo("myCanvas"); 并绘制了它。有什么建议吗？

【解决方案2】：

我认为

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

应该是

var Canvas = document.getElementById(idCanvas);

使用这些撇号，您没有引用参数。

【讨论】：

【解决方案3】：

我想我知道为什么它不起作用。我已经对 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 从标题中取出到正文中，它起作用了。无论如何感谢您的帮助。

【讨论】：

查看我的更新答案。这不是将您的脚本移动到正文，而是将您拥有的两段脚本分开。