Question

我只是在做一些简单的JavaScript作业，但我无法弄清楚为什么我的函数没有被调用。

我现在所有的te函数都是alert("test")因为我必须确保在实际编写它之前调用该函数。 JS文件DOMassignment_3_ext.js与HTML文件位于同一文件夹中。

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM Assignment: #3</title>
<script src="DOMassignment_3_ext.js">
</script>
</head>
<body>
<h2>Christmas Mad Libs</h2>
<form name="words">
    <table>
        <tr>
            <td>Name</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>Body-part</td>
            <td><input type="text" name="body"></td>
        </tr>
        <tr>
            <td>Animal</td>
            <td><input type="text" name="animal"></td>
        </tr>
    </table>
    <input type="button" onlick="madlibs(name, body, animal)" value="Submit">
</form>
<p>
<b class="name"></b> the Red-<b class="body"></b> <b class="animal"></b><br>
Had a very shiny <b class="body"></b><br>
And if you ever saw it<br>
You would even say it glows<br>
And all of the other <b class="animal"></b><br>
Used to laugh and call him names<br>
They never let poor <b class="name"></b><br>
Join in any <b class="animal"></b> games<br>
</p>
</body>
</html>

JS：

function madlibs(name, body, animal){
  alert("test");
}

Answer 1

<input type="button" onlick="madlibs(name, body, animal)" value="Submit">

应该是：

<input type="button" onclick="madlibs(name, body, animal)" value="Submit">

Answer 2

问题是你传递的是不存在的变量！ name会这样做（总会有一个全局变量name，但body和animal不会。因此，当您调用该函数时：

onlick="madlibs(name, body, animal)"
onclick="madlibs(name, body, animal)" // and even when you spell it correctly

Javascript会说＆＃34; body？我不知道任何名为body！＆＃34;然后它会抛出一个错误（准确地说是ReferenceError）并停止运行代码。这意味着不会调用madlibs。

在你定义这些变量之前，你可以简单地将它们排除在调用之外：

onclick="madlibs()"

（实际上，学习如何使用Javascript附加事件处理程序会更好，但这是一个不同的故事。）

再看看，可能这些变量是在DOMassignment_3_ext.js中定义的，但考虑到文件的名称，似乎不太可能......

为什么不调用我的函数？

2 个答案: