通过函数将一个变量(id)从HTML传递到外部js文件

passing a variable (id) from html to external js file with functions

本文关键字：文件 HTML 外部 js 变量 函数 一个 id      更新时间：2023-09-26

我是新颖的javascript，我试图开发一个网页与动态图形使用的画布，html 5和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文件是这样的

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

我不知道如果调用drawRectangulo函数在javascript文件是正确的，如果我传递画布的id正确:窗口。onload = drawRectangulo('myCanvas');¿我该如何将Id从html文件传递到js函数?我应该使用:("，"，")还是应该创建一个新变量，用画布的id初始化它并将其传递给函数?JavaScript函数中的变量id处理得好吗?

您需要这样做:

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的其他地方可以使它工作。)

我认为这

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>

我拿出窗口。onload从header到body，它工作了。谢谢你的帮助。

相关文章：